[Vue warn]: избегайте прямого изменения свойства, так как значение будет перезаписываться при каждом повторном рендеринге родительского компонента. - PullRequest
0 голосов
/ 30 октября 2018

Я учу vuejs, но не могу найти правильный ответ. Когда я нажимаю кнопку «Изменить возраст» или кнопку «Изменить свое имя», я получаю ошибку ниже.

[Vue warn]: избегайте прямого изменения свойства, так как значение будет перезаписываться при повторном рендеринге родительского компонента. Вместо этого используйте данные или вычисляемое свойство, основанное на значении реквизита. Опора изменена: "myName"

[Vue warn]: избегайте прямого изменения свойства, так как значение будет перезаписываться при повторном рендеринге родительского компонента. Вместо этого используйте данные или вычисляемое свойство, основанное на значении реквизита. Опора изменена: "userAge"

Код здесь.

https://codesandbox.io/s/k2197nr4o3

Пожалуйста, дайте мне знать, что не так в этом коде.

1 Ответ

0 голосов
/ 30 октября 2018

Очевидно, что вы пытаетесь напрямую изменить свойства реквизита.

Например:

props: { name: 'something' }
methods: { 
 change_name(new_name) {
   this.name = new_name
 }
}

Это не рекомендуется и может привести к недостаточной реактивности.

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

props: { name: 'something' }
methods: { 
 change_name(new_name) {
   this.$emit('name-updated', new_name)
 }
}

И на родительском компоненте прослушайте это событие, чтобы изменить пропускаемый вами пропущенный элемент:

<child-component :name="name" @name-updated="name = $event" />

Или мой любимый способ - использовать модификатор .sync . Поэтому родительский компонент должен быть:

<child-component :name.sync="name" />

и метод дочернего компонента:

 change_name(new_name) {
   this.$emit('update:name', new_name)
 }

Если компоненты не имеют отношения родитель-потомок, взгляните на Vue.js Event Bus или Vuex

...