vue.js - 如果 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，你可以使用modifiers :

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