1

I want to clear errors after i close modal or after i send data to database and i do it outside vue instance, i have tryed vm.$validator.errors.clean(), and reset but these wont work for me, any suggestions how do access them outside component?

 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>

I provided code example

user3699711
  • 49
  • 1
  • 8
  • Have you tried `clear()` methods? Example: https://jsfiddle.net/hcac5je0/1/ – ittus May 13 '18 at 14:22
  • your suggested method is inside vue instance but i need to access it from outside vue. If i console.log `vm.$validator.errors` it says undefined – user3699711 May 13 '18 at 14:45
  • How do you register Vue component and get reference to vm.$validator.errors? I need to see more your code to detect the problem. – ittus May 13 '18 at 14:52
  • I added some of code so i need to clean errors inside vue component add-modal inside jquery function – user3699711 May 13 '18 at 15:09

1 Answers1

0

this in your callback is not Vue instance. You can try below techniques, assign 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()
   });
  }
 }
ittus
  • 21,730
  • 5
  • 57
  • 57
  • Allmost worked for me, i made extra function for that , but any suggestions how do put that code to work ? – user3699711 May 13 '18 at 20:35
  • May I ask you to have a look at a VeeValidate related question here : https://stackoverflow.com/questions/59488066/bootstrapvue-veevalidate-show-an-extra-error-message-when-form-is-invalid ? – Istiaque Ahmed Dec 28 '19 at 19:16