Return v-for 基于键值的单个结果

Question

我有一个 v-for 循环，根据从另一个数据值 counter 中选择的 :key，一次显示一个结果。虽然这很好用，但问题在于在值更新时添加 <transitions>，导致两者都短暂出现并在页面上跳转，而前一个项目转换消失。

据我所知，问题是所有 tag 结果仍然存在于 v-for 的 DOM 上，并且只是在两者之间转换。

是否有更好的方法实现此目的，以便仅根据密钥更新 {{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>

Answer 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 更改时重新计算，从而导致对引用 activeTag 属性的 DOM 元素进行更新。

Return v-for 基于键值的单个结果

Return single result from v-for based on key value

javascript

vue.js

v-for