Вернуть одиночный результат из v-for на основе значения ключа - PullRequest
Новая
       7

Вернуть одиночный результат из v-for на основе значения ключа

0 голосов
/ 03 марта 2019

У меня есть цикл v-for для отображения одного результата за раз на основе выбранного :key из другого значения данных counter.Хотя это прекрасно работает, проблема заключается в добавлении <transitions> при обновлении значения, в результате чего на короткое время появляются и переходы по странице, когда исчезает предыдущий переход элемента.

Из того, что я вижу, проблема в том, чточто все результаты tag все еще находятся в DOM от v-for и просто переходят между ними.

Есть ли лучший способ добиться этого, чтобы только значения {{tag}} обновлялись на основеключ? 

<div v-for="tag in tags" :key="tag.id">
     <transition name="fade">
      <div v-if="tag.id == counter">
        <div class="tag-col--prod-img mb-4">
          <img class="img-fluid" :src="tag.thumb" />
        </div>
        <h5 class="mb-5">{{tag.heading}}</h5>
        <div class="mb-3">
          <h1>{{ tag.title }}</h1>
        </div>
        <h2 class="mb-3">{{ tag.price }}</h2>
        <p class="mb-4">
          {{tag.detail}}
        </p>
        <a :href="tag.link" target="_blank">
          <button class="btn btn-primary">View product</button>
        </a>
       </div>
      </transition>
</div>

1 Ответ

0 голосов
/ 03 марта 2019

Вот как это сделать и воспользоваться преимуществами вычисленных свойств Vue: 

<transition name="fade">
  <h5 class="mb-5">{{activeTag.heading}}</h5>
  <!-- The rest -->
</transition>

Добавьте это к своему компоненту: 

computed: {
  activeTag() {
    return this.tags.find(({ id }) => id === this.counter);
  }
}

activeTag будет пересматриваться каждый раз tags или counter изменения, вызывающие обновление элементов DOM, ссылающихся на свойства activeTag.

...