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

#javascript #vue.js #v-for

Вопрос:

У меня есть 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. Зачем вы используете v-for, если хотите отобразить только один элемент из списка?

2. @bernie Я не слишком уверен. Есть ли лучший способ определить, какие {{tag}} элементы будут отображаться на основе tag.id соответствия counter значению ключа?

Ответ №1:

Вот как это сделать и воспользоваться вычисляемыми свойствами 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 свойства.