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);">

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

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

Answer 2

您可以创建布尔数据：

BenchmarksDotNet

现在，在您成功回复后，只需将data: { // ... toggleButton: false },设置为toggleButton：

true

现在，在您的按钮html中，设置if (e.status === 200) { vm.toggleButton = true; }类：

toggbleButton

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

2 个答案: