javascript - 在 v-if 和 else 条件中给定时，btn-next 不起作用？

Question

我正在为我的项目使用 vue js 和 html，并且我正在注册。所以，我的标签很少。要转到下一个选项卡，“btn-next”是所需的类(class)。但是，只有当我收到的 json 响应为真时，我才需要转到下一个选项卡。

所以，我将我的 html 修改为

<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>

但是当我尝试这种方式时..我无法移动到下一个选项卡？谁能帮我找到解决方案..

我能够获得响应并在不同的条件下移动，但我无法移动到下一个选项卡。这意味着当我给内部 div 时 btn-next 不工作。所以，请帮我找出解决办法。

我的详细代码是

<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>

我的vue js代码

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;
  },

Answer 1

案例一:

如果按钮正确呈现，请检查您的网络服务器的后端代码。我发现你正在渲染一个带有两个“提交”按钮的表单，也许后端不知道你期望哪个提交。

当 response.status == false: Submit Again 和 Submit 被渲染时

当 response.status == true: Next 被渲染

但是它们都是普通的提交按钮，你的后台或者handleSubmit知道吗？

案例二:

如果按钮没有正确呈现，请检查您的 JSON 结构和 vue 语法。