Btn-next does not work if set inside the v-if and else conditions?

I am using vue js and html for my project and I am doing the registration. So, I have several tabs. To go to the next tab, "btn-next" requires a class. But I need to go to the next tab only if the json response I get is right.

So I changed my html as

<div class="wizard-footer">
  <div class="pull-right">
    <div v-if="response.status == false">
      <button type="submit" class='btn btn-primary'>Submit Again</button></div>
    <div v-if="response.status == true">
      <button type="submit" class='btn btn-next btn-primary'>Next</button></div>
    <div v-else>
      <button type="submit" class='btn btn-primary'>Submit</button>
    </div>
  </div>
</div>

But when I try this ... Can't I go to the next tab? someone please help me find a solution.

I can get an answer and go through different conditions, but I can not go to the next tab. this means btn-next does not work when I give inside a div. So please help me find a solution.

My verbose code

<div class="tab-pane" id="step2">
  <form method="POST" id="form1" v-on:submit.prevent="handleSubmit($event);">
    <div class="row p-b-15  ">
      <div class="row">
        <div class="col-sm-12">
          <div class="col-sm-6">
            <div class="form-group">
              <label>Contact Name :</label>
              <input name="cname" type="text" class="form-control" id="cname" placeholder="Contact Name" required="required" v-model="cname" />
            </div>
          </div>
        </div>
      </div>
      <div class="wizard-footer">
        <div class="pull-right">
          <div v-if="response.status == false"><button type="submit" class='btn btn-next btn-primary'>Next</button></div>
          <div v-if="response.status == true"><button type="submit" class='btn btn-next btn-primary'>Next</button></div>
          <div v-else>
            <button type="submit" class='btn btn-primary'>Next</button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

My vue js code

submitBox = new Vue({
  el: "#submitBox",

  handleSubmit: function(e) {
    var vm = this;
    data = {};
    data['name'] = this.cname;
    data['pid'] = this.pid;
    $.ajax({
      url: 'hpost/contact/',
      data: data,
      type: "POST",
      dataType: 'json',
      success: function(e) {
        if (e.status) {
         vm.response = e;
          console.log(vm.response);
          alert("Registration Success")

        } else {
          vm.response = e;
          console.log(vm.response);
          alert("Registration Failed")
        }
      }
    });
    return false;
  },
+4
source share
1

1:

, -. , "submit", , , .

response.status == false: " "

response.status == true:

, handleSubmit?

2:

, JSON vue.

0

Source: https://habr.com/ru/post/1691826/


All Articles