Как изменить значение свойства компонента в коде в Vue.js?

Question

У меня есть массив общих дочерних компонентов в моем родительском компоненте:

<component v-for="item in items" :key="item.id" :is="componentName">

Я могу получить дочерний элемент через this.$refs, но я не могу установить новое значение для пропеллера :isкак:

this.$refs[id][0].is = 'MyNewComponentName'

Как установить значение свойства экземпляра компонента в коде?

Answer 1

Сначала определите свою структуру пропеллера как

{
  ...item, // to use your current variables
  componentName: 'MyExistingComponentName'
}

Получите реквизит и привяжите его к переменной данных, например что-то вроде

data: function() {
  returns {
     items: this.propItem
  }
}

Сделайте необходимые корректировки в вашем теге

<component v-for="item in items" :key="item.id" :is="item.componentName">

Теперь у вас есть 2 варианта, вы можете либо изменить item.componentName, ссылаясь на this.items в методе, найти индекс и изменить его, либо вы можете изменить родительский элементзначение реквизита, используя пользовательское событие, используя $.event(event-name, 'MyNewComponent`). Оба метода хороши, это действительно зависит от ваших требований.

См. https://vuejs.org/v2/guide/components-custom-events.html Вы также можете прочитать вопросы stackoverflow по изменяющимся значениям prop.