如果json响应为真,如何启用按钮？

Question

我正在注册,我的HTML代码是

<div class="tab-pane" id="step1">
  <form method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">
    <!-- DATA COMES HERE -->
    <div class="wizard-footer">
      <div class="pull-right">
        <button type="submit" class='btn btn-next btn-primary' name='next' value='Next'>Next</button>
      </div>
    </div>
  </form>
</div>
<div class="tab-pane" id="step2">
  <!--******8data**** -->
  <button type="submit" class='btn btn-next btn-primary' name='next' value='Next'>Next</button>
</div>

btn-next正在进入下一个标签.如果我删除btn-next,它将不会移动到下一个选项卡.

我的vue js代码是

submitBox = new Vue({
  el: "#submitBox",
  data: {
    -- -- -
  },
  methods: {
    handelSubmit: function(e) {
      var vm = this;
      data = {};
      -- -- -- -- -- --
      $.ajax({
        url: '/add/post/',
        data: data,
        type: "POST",
        dataType: 'json',
        success: function(e) {
          if (e.status) {
            alert("Success")
            vm.pid = e.pid;
            console.log(vm.pid);

          } else {
            vm.response = e;

            alert(" Failed")
          }
        }
      });
      return false;
    },
    handleSubmit: function(e) {
      -- -- -- -- -- -- -- -- -- -
    }
  },
});

如果e.status,那么我只需要移动到另一个选项卡.但是现在,如果警报也失败了,我将转到另一个标签.我怎样才能解决这个问题.请帮我解决同样的问题.

Answer 1

我希望我答对了你的问题。

首先，您不需要 onSubmit，您可以使用修饰符：

//REPLACE THIS
 <form method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">

//WITH THIS, NOTE THE 'prevent' MODIFIER
 <form method="POST" data-parsley-validate="true" v-on:submit.prevent="handelSubmit($event);">

现在，要有条件地禁用/启用按钮，只需添加一个 :disabled 动态属性：

//I'm assuming that if you got the pid it is considered a success,
// obviously you can change it to be any property you like as long it has a true/false value
<button type="submit" class='btn btn-next btn-primary' name='next' value='Next' :disabled="!pid">Next</button>