Vue 2 - Мутирующие реквизиты vue-warn

Я хочу дать этот ответ, который помогает избегать использования большого количества кода, наблюдателей и вычисленных свойств. В некоторых случаях это может быть хорошим решением:

Опоры разработаны для обеспечения односторонней коммуникации.

, Когда у Вас есть модальное show/hide кнопка с опорой, лучшее решение меня состоит в том, чтобы испустить событие:

<button @click="$emit('close')">Close Modal</button>

Затем добавляют слушателя модального элемента:

<modal :show="show" @close="show = false"></modal>

(В этом случае опора show является, вероятно, ненужной, потому что можно использовать легкое v-if="show" непосредственно на основном модальном)

Я лично всегда предлагаю, если Вы нуждаетесь, чтобы видоизменить опоры, первичная обработка их к вычисленному свойству и возвратиться оттуда, после этого можно видоизменить опоры легко, даже в котором можно отследить мутацию опоры, если они видоизменяются от другого компонента также, или мы можем Вы смотреть также.

Поскольку Vue прислоняется, один путь поток данных, Это предотвращает дочерние компоненты от случайного видоизменения состояния parent’s.

Из официального документа Vue, мы найдем 2 способа решить это проблемы

1. , если дочерний компонент захочет опоры использования как локальные данные, лучше определять локальное свойство данных.

     props: ['list'],
     data: function() {
       return {
         localList: JSON.parse(this.list);
       }
     }
   
   

2. опора передается в как необработанное значение, которое должно быть преобразовано. В этом случае, it’s лучше всего для определения вычисленного свойства с помощью значения prop’s:

     props: ['list'],
     computed: {
       localList: function() {
          return JSON.parse(this.list);
       },
       //eg: if you want to filter this list
       validList: function() {
          return this.list.filter(product => product.isValid === true)
       }
       //...whatever to transform the list
     }