vue модальное окно ошибка с props

373
12 апреля 2017, 15:06

Vue компонент модального окна. При вызове метода savePos

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

Выдает ошибку:

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>)

Пробовал так:

var temp = this.show; 
temp = false;

Тоже не работает. Не пойму, как использовать мутированные сойства.

Answer 1

Нельзя изменять props компонента в нем самом Можно либо state modal (show | hidden) держать в глобальном state (шина, vuex) либо генерировать событие через $emit внутри modal, ловить его в родителе и там менять state.

READ ALSO
Как навесить событие на кнопку?

Как навесить событие на кнопку?

Есть форма с кнопкой,вот код инпута

241
Задача из книги Выразительный Javascript

Задача из книги Выразительный Javascript

Всем приветСейчас осваиваю Javascript через книгу "Выразительный javascript"

318
Statement, Expression, ExpressionStatements. Отличие и корректный перевод

Statement, Expression, ExpressionStatements. Отличие и корректный перевод

Столкнулся с понятиями Statement, Expression, ExpressionStatements в книге Douglas CrockfordJavaScript: The Good Parts

234