Как корректно писать код с props?

Question

[kiranananda]

Здравствуйте!

Читаю доки по vue написано, что не корректно менять значения props и он выводит варнинги. Когда то в начале он мне и выводил предупреждения. Но вот на код ниже он не ругается. По сути у меня один компонент передает объект другому компоненту, а далее пишу код.

computed: {
        	fields () {
        		for (var key in this.data) {
        			if ( ! this.data[key]['attr'] ) this.data[key]['attr'] = {};
        			if ( ! this.data[key]['attr']['id'] ){
        				this.data[key]['attr']['id'] = 'Forms_'+this.data[key]['name'];
        			}
                }
        		return this.data;
        	}
        }

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

Answer 1

[lavezzi1]

Нужно сохранять prop в data(), если вы планируете его изменять.

props: {
    value: [String, Number, Object, Array]
}
data() {
    return {
       mutableValue: this.value
    };
}

И дальше mutableValue крутите как угодно. Еще правильней будет сохранять prop value через watch.

Comments

[kiranananda]

Но в таком случае переменная mutableValue так же будет содержать ссылку на объект или тут какой то хитрый механизм?
Покажите если не сложно с watch пример...

[lavezzi1]

kiranananda, Посмотрите вот этот компонент: https://github.com/sagalbot/vue-select/blob/master...