vueJS - пропадает мутация при обновлении локальной копии - PullRequest
Новая
       9

vueJS - пропадает мутация при обновлении локальной копии

0 голосов
/ 25 апреля 2018

В шаблоне моего дочернего компонента есть два элемента ввода с v-моделями, как показано ниже. 

<input v-model="user.name" />
<input v-model="user.email" />

props: {
   'account': {}
},
data: function() {
   return { user : this.account.user }
}

Когда изменяется текст в полях ввода, объект пользователя обновляется, что и ожидается.Но реквизит account.user также обновляется с изменениями.Как я могу сделать это, чтобы обновить только user объект и сохранить проп account.user как есть?

1 Ответ

0 голосов
/ 25 апреля 2018

Это происходит потому, что в Javascript объект передается по ссылке. Когда вы делаете user : this.account.user, вы передаете ссылку на объект в user данные. Вот почему, когда вы редактируете user данные, account.user также редактируется, они ссылаются на один и тот же объект.

Вы можете клонировать его с помощью оператора распространения ES6. 

return { user : {...this.account.user} }

Если вы не используете ES6, я бы посоветовал вам использовать lodash clone . 

return { user : _.clone(this.account.user) }

(Кстати, методы клонирования, описанные выше, работают только для мелкого объекта. Для глубоко вложенного объекта вместо этого используйте lodash cloneDeep.)

...