Squeak.ru - шаблоны программирования

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

Предположим, у меня есть массив 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
  }
},

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

11.07.2018

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

Ответы:


1

Не назначайте напрямую массиву с помощью индекса — вместо этого используйте splice(), иначе JavaScript не сможет определить, что вы изменили массив.

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

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

11.07.2018
Новые материалы

Угловая структура архитектуры
Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

«Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

Создайте API с помощью Python FastAPI
Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

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

Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...