如何访问 vee-validate 错误并在 vue 实例（组件）之外清除它们

Question

我想在关闭模式后或在我将数据发送到数据库并在 vue 实例之外执行此操作后清除错误，我已经尝试 vm.$validator.errors.clean()，然后重新设置，但这些对我不起作用，有什么建议吗在组件外部访问它们吗？

 Vue.component('add-modal', {
    template: '#add-modal-template',
    mounted() {
        $(document).on('hidden.bs.modal','.modal', function (e) {
            $(this).remove('bs.modal');
            $(this).removeData('bs.modal');
            $(".modal-body input").val(" ");
            $('.modal-body option:first').prop('selected',true);
            console.log($(this).find('.modal-body').html());
            var myBackup = $(this).find('.modal-body').html();
            $('.modal-body').empty();
            $('.modal-body').append(myBackup);

            console.log(vm.$validator.Errors);
        });
    }
    }

    var vm = new Vue({
        el: '#app',
        data: {},
        created: function(){
            //if something is need to be loaded first
        }
    });

});


    <script type="text/x-template" id="add-modal-template">
    <!-- Modal -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Add new deal</h5>
                    <button type="button" class="close no-glow" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="addDealForm" @submit.prevent="" v-on:submit.prevent>
                        <div class="form-group">
                                <label>Deal title</label>
                                <input type="text" name="title" class="form-control" id="Contact Person" v-validate="'required|max:15'" placeholder="Enter deal title" v-model="deal.title">
                                <span class="error text-danger" v-show="errors.has('title')">{{errors.first('title')}}</span><br>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-primary no-glow" data-dismiss="modal">Close</button>
                            <button class="btn btn-success no-glow">Save</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</script>

我提供了代码示例

Answer 1

this 在你的回调中不是 Vue 实例。您可以尝试以下技巧，分配 var self=this

 Vue.component('add-modal', {
  template: '#add-modal-template',
  mounted() {
   var self = this;
   $(document).on('hidden.bs.modal', '.modal', function(e) {
    $(this).remove('bs.modal');
    $(this).removeData('bs.modal');
    $(".modal-body input").val(" ");
    $('.modal-body option:first').prop('selected', true);
    console.log($(this).find('.modal-body').html());
    var myBackup = $(this).find('.modal-body').html();
    $('.modal-body').empty();
    $('.modal-body').append(myBackup);

    console.log(self.errors);
    self.errors.clear()
   });
  }
 }

如何访问 vee-validate 错误并在 vue 实例（组件）之外清除它们

How do access to vee-validate errors and clear them outside vue instance (component)

vue.js

vuejs2

vee-validate