时间戳

首页 > 解决方案 > VueJS 内联模板和其中的 v-for

vue.js - VueJS 内联模板和其中的 v-for

问题描述

我正在尝试使用下拉菜单的内联模板，但是在状态之间切换时会弄乱事情。这是我在主模板中使用的代码：

<div>
<article v-for="(game, index) in games">
<dropdown ref="dropdown" inline-template>
<a v-for="(branch, index) in game.branches" :key="'branch' + index" :href="branch.link">{{ branch.name }}</a>
</dropdown>
</article>
</div>

它在加载时工作正常，但是当我在类别之间切换时，链接变得混乱，并且来自加载的相同链接保留用于其他渲染。

难道我做错了什么？

标签： vue.js

解决方案

看看这里。

在 2.2.0+ 中，当对组件使用 v-for 时，现在需要一个键。

因此，您应该使用:keyin v-for。

您可以将密钥分配给索引或使其更加独特，例如：

:key="'branch'+index"

如果您之前在组件中使用过类似的键（键应该是唯一的）。

推荐阅读