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

Я начал серию https://laracasts.com/series/learning-vue-step-by-step . Я остановился на уроке Vue, Laravel и AJAX с этой ошибкой:

vue.js: 2574 [Vue warn]: избегайте мутации напрямую, так как значение будет перезаписывается при повторной визуализации родительского компонента. Вместо этого используйте данные или вычисляемое свойство, основанное на значении реквизита. Подставка изменена: «список» (находится в компоненте)

У меня есть этот код в main.js

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    created() {
        this.list = JSON.parse(this.list);
    }
});
new Vue({
    el: '.container'
})

Я знаю, что проблема в создал () , когда я переписал список проп, но я новичок в Vue, поэтому я совершенно не знаю, как это исправить. У кого-нибудь есть идея, как (и, пожалуйста, объясните, почему) это исправить?

141
задан WillardSolutions 10 July 2019 в 14:04
поделиться

3 ответа

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

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

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

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

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

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

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

0
ответ дан 23 November 2019 в 23:09
поделиться

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

0
ответ дан 23 November 2019 в 23:09
поделиться

Поскольку 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
      }
    
    
    
0
ответ дан 23 November 2019 в 23:09
поделиться
Другие вопросы по тегам:

Похожие вопросы: