vue.js - Vue for 模板内循环

Question

这个问题已经有答案了:

How to deal with v-for in vuejs when element has no id? (1 个回答)

已关闭 5 年前。

我有一个 Vue 模板，它接收 json 字符串作为数据:

<component data="{{ object.toJson() }}"></component>

对象由名称和字符串数组组成。我现在有这个在我的

<template>    
    <ul>
      <li v-for="url in object.data['urls']">{{ url }}</li>
    </ul>
</template>

然而，这在我的 linter 上给出了错误，我想知道为什么。这与文档中发布的 Vue 示例完全相同。

error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key

Answer 1

您可以向元素添加索引，如下所示:

<template>    
    <ul>
      <li v-for="(url, index) in object.data['urls']" :key="index">{{ url }}</li>
    </ul>
</template>