как использовать функцию просмотра в vue js

не могли бы вы рассказать мне, как использовать функцию просмотра в vue js. Я пытался использовать, но получил эту ошибку.

vue.js:485 [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: "m"

found in

---> <AddTodo>
       <Root>

https://plnkr.co/edit/hVQKk3Wl9DF3aNx0hs88?p=preview

Я создал разные компоненты и смотрю свойства в основном компоненте.

var AddTODO = Vue.extend({
    template: '#add-todo',
    props: ['m'],
    data: function () {
        return {
            message: ''
        }
    },
    methods: {
        addTodo: function () {
            console.log(this.message)
            console.log(this.m);
            this.m =this.message;
        },
    },
});

Когда я пытаюсь добавить item, я получаю эту ошибку. Шаг, чтобы воспроизвести эту ошибку

  1. Введите что-нибудь в поле ввода и нажмите Add button

javascript vue.js vue-router vuejs2 vue-component
person naveen    schedule 02.09.2017    source источник
comment
не могу воспроизвести, работает нормально   -  person dfsq    schedule 02.09.2017

Ответы (2)


arrow_upward
2
arrow_downward 

this.m =this.message;

эта строка является проблемой,

Рекомендуется не изменять prop напрямую...

вместо этого создайте свойство данных, а затем измените его.

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

person Maulik    schedule 02.09.2017
comment
как смотреть свойства?. См. Я хочу добавить элемент в список, используя метод просмотра - person naveen; 02.09.2017
comment
почему вы хотите использовать часы? можешь немного объяснить пожалуйста :) - person Maulik; 02.09.2017
comment
Я просто хочу проверить, как проверить старое и новое значение моей собственности. - person naveen; 02.09.2017
comment
вы можете добавить элемент в data, а затем в методе created() Lifecycle присвоить значение prop вашему элементу данных. например: this.dataItem = this.propItem затем наблюдайте за dataItem обычным способом. - person Maulik; 02.09.2017

arrow_upward
1
arrow_downward

Пропсы компонента автоматически обновляются в компоненте, как только вы меняете их значение вне его. По этой причине пытаться изменить значение свойства внутри вашего компонента — плохая идея: вы должны использовать свойства только для чтения. Если вы хотите использовать свойство в качестве начального значения некоторых data вашего компонента, вы можете просто объявить его следующим образом:

data: function () {
    return {
        changeable: this.receivedProp;
    }
},

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

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

person Marcello Fuschi    schedule 02.09.2017