尝试在Vue.js中动态添加id时id未定义
提问于 2019-10-15 15:31:36
这是一个简单的待办事项列表，我尝试在呈现的每个<li>中添加一个id。每个id应该命名不同(显然)但名称相似："id0"，"id1"，"id2"...etc
该数字来自指令v-for="i in items"
我是这样做的：
<li :id="`id${i.id}`" v-for="i in items" :key="`id${i.id}`">完整代码：
<ul class="item-list-ul">
<li :id="`id${i.id}`" v-for="i in items" :key="`id${i.id}`">{{ i }}
<div class="item-butons">
<b-button class="done-btn" @click="strikeItem(i)" size="sm" variant="outline-dark">DONE!</b-button>
<b-button class="delete-btn" @click="deleteItem(i)" size="sm" variant="warning">Delete</b-button>
</div>
</li>
</ul>
我的items数组：
data () {
return {
items: ["five", "<li>", "should","be","rendered"]
}
}
但是，当我在控制台中检查新的动态创建的<li> id的名称时，它们只是显示为idundefined，而在例如有3个<li>的情况下，它们应该如下所示：
id0
id1
id2但是，在控制台中没有任何错误。看起来vue-html根本不读取${i.id}中的数字，而只是未定义。为什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-10-15 15:39:22
如果items只是一个字符串数组，则没有可用的id属性。这种情况下的标准用法是像这样使用索引：
<li v-for="(i, index) in items" :id="`id${index}`" :key="index">或者，您可以重塑您的数据，使其具有如下ids：
[{ id: 0, text: 'foo' }, { id: 1, text: 'bar' }, { id: 2, text: 'baz' }]例如，这可以作为computed property的一部分来完成。注意，这也需要对您的模板进行一些更改。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58398183
复制相关文章
点击加载更多
腾讯云开发者
