时间戳

首页 > 解决方案 > 如何在具有多个 div 的 v-for 中添加 :key

javascript - 如何在具有多个 div 的 v-for 中添加 :key

问题描述

我想制作没有任何 html 元素的 v-for 循环，所以我决定使用 <template 作为父级。我不知道为这个循环分配 :key 。我不能将它分配给模板和循环内的每个 div。有任何想法吗？

<template
  v-for="{ id, text, option, percentage, value } in reports"
>
  <div class="table-row__index">
    {{ id }}
  </div>
  <div class="table-row__title">
    <p>{{ text }} - <strong>{{ option }}</strong></p>
  </div>
  <div class="table-row__info">
    {{ percentage }}%
  </div>
  <div class="table-row__info">
    {{ value }}
  </div>
</template>

标签： javascriptvue.jsvuejs2

解决方案

作为一个好的做法，我们应该总是在里面有一个父元素。但是由于您的限制，可以按照官方文档中的说明在模板上使用 for 循环

https://vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt

在这种情况下，必须将任何键添加到子元素/组件中，这是官方推荐的。

请参阅此示例，并将键添加到您的 div 的内部模板。

new Vue({
    el: '#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <template v-for="n in 5">
    <span :key="'number' + n">{{ n }}</span>
    <span :key="'dot' + n">. </span>
  </template>
</div>

推荐阅读