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

时间:2018-05-13 13:06:44

标签: vue.js vuejs2 vee-validate

我希望在关闭模态后或在我将数据发送到数据库之后清除错误并且我在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>

我提供了代码示例

0 个答案:

没有答案