Question

我有一个v-for循环，可以根据从另一个数据值:key中选择的counter一次显示单个结果。尽管效果很好，但问题在于在值更新时添加<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元素进行更新。

根据键值从v-for返回单个结果

1 个答案: