Как получить доступ к vee-validate ошибкам и очистить их вне экземпляра vue (компонента) - PullRequest
Новая
       8

Как получить доступ к vee-validate ошибкам и очистить их вне экземпляра vue (компонента)

0 голосов
/ 13 мая 2018

Я хочу очистить ошибки после закрытия модального режима или после отправки данных в базу данных, и я делаю это вне экземпляра 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>

Я привел пример кода

1 Ответ

0 голосов
/ 13 мая 2018

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()
   });
  }
 }
...