Vue component of the modal window. When you call the savePos method

Vue.component('modal', { template: '#modal-template', props: ['show'], methods: { savePost: function () { // Insert AJAX call here... this.show = false; } } }); new Vue({ el: '#app', data: { showModal: false } });

Gives an error message:

 vue2.js:513 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "show" (found in component <modal>)

I tried this:

 var temp = this.show; temp = false;

It does not work either. I do not understand how to use mutated features.

    1 answer 1

    You can not change the component props in it. You can either keep the state modal (show | hidden) in the global state (bus, vuex) or generate an event via $ emit inside the modal, catch it in the parent and change the state there.