javascript - Vue.js 2 - 防止函数两次提交

Question

我的 vue.js 上有一个使用 laravel 的插入方法，但是...当我单击保存按钮两次时，函数“save()”有重复的数据并插入两次，我尝试使用解决这个问题v-on:click.stop.prevent="save()" 但仍然不起作用，所以也许我可以在我的ajax上解决它，但我不知道如何用ajax解决它，有人可以帮助我吗？

模态

<div class="modal inmodal" id="edit" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                 <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">Register</h4>
                        <input type="hidden" v-model="competency.id">         
                 </div>
                 <div class="modal-body">
                        <div class="form-group">
                            <label>Name: </label>
                            <input type="text" name="name" v-model="competency.name"  class="form-control" placeholder="name"><br>
                            <label>Description: </label>
                            <textarea rows="5" name="" v-model="competency.description" class="form-control" placeholder="Description"></textarea><br>
                        </div>
                 </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" v-on:click.stop.prevent="save()">Save</button>
                </div>
        </div>
    </div>
</div>

Vue.js

    save: function(){
      var self = this;
      self.competency._token = window.Laravel.csrfToken;
      $.ajax({
          url: "competency",
          type: "POST",
          dataType: 'json',
          traditional: true,
          data: self.competency
      }).done(function (data) {
          self.filter();
          $("#edit").modal('hide');
          fillCompetency(null);
          //self.list = data;
      });
    },

Answer 1

你可以使用 on:click.once="save()"来代替，如果这是你的要求，它不会执行 save 方法，直到组件被销毁。