Vuejs2: как оценить обновление реквизита при использовании объекта в качестве реквизита?

Question

Vuejs2: как оценить обновление реквизита при использовании объекта в качестве реквизита?

1

Предположим, что у меня есть массив feedsArray, значение примера может выглядеть так:

this.feedsArray = [
  {
    id: 1,
    type: 'Comment',
    value: 'How are you today ?'
  },
  {
    id: 2,
    type: 'Meet',
    name: 'Daily sync up'
  }
]

Предположим, что я зарегистрировал два компонента: Comment и Meet, Каждый компонент имеет настройку прокрутки следующим образом:

props: {
  feed: Object
}

и основной компонент имеет следующее определение:

<component v-for="feed in feedsArray" :feed="feed" :key="feed.id" :is="feed.type"></component>

Как вы можете видеть, он использует is свойство для выбора другого компонента. Мой вопрос в том, как определить изменение объекта подачи в дочернем компоненте? Например, когда я устанавливаю

this.feedsArray[0] = {
  id: 1,
  type: 'Comment',
  value: 'I am not ok'
}

Как компонент Comment может обнаружить изменения? Я попытался добавить определение наблюдателя в дочерний компонент следующим образом:

watch: {
  feed: {
    handler (val) {
      console.log('this feed is changed')
    },
    deep: true
  }
},

Но здесь это не работает. Кто-нибудь знает, как это решить?

ahwyX100 11 июль 2018, в 08:19

Источник

0

Поскольку вы назначаете один и тот же id (и который вы используете в :key="feed.id" ), я чувствую, что реактивность Vue не сработает, поскольку она не будет повторно визуализировать компоненты v-for
Phil 11 июль 2018, в 06:59
0

Вы получили ключ! Но, таким образом, компонент сначала будет уничтожен, а затем будет снова отображаться, интересно, есть ли в любом случае только обновление компонента, но не повторная визуализация.
ahwyX100 11 июль 2018, в 08:42

Теги:

javascript

vue.js

vuejs2

1 ответ

Ещё вопросы

Поскольку вы назначаете один и тот же id (и который вы используете в :key="feed.id" ), я чувствую, что реактивность Vue не сработает, поскольку она не будет повторно визуализировать компоненты v-for
Вы получили ключ! Но, таким образом, компонент сначала будет уничтожен, а затем будет снова отображаться, интересно, есть ли в любом случае только обновление компонента, но не повторная визуализация.

IVO GELOV · Accepted Answer · 2018-07-11T08-55-00.000Z

Не назначайте непосредственно массиву, используя index - use splice(), иначе JavaScript не сможет обнаружить, что вы изменили массив.

Если вы хотите изменить только значение уже существующего ключа объекта - тогда просто обновите его, например this.feeds[0].value = 'I am not okay any more';

Это работает только для существующих ключей - иначе вы должны использовать this.$set(this.feeds[0], 'value', 'I am not okay any more');