Nuxt v-for键值

在Nuxt.js中，可以使用v-for指令来循环渲染数据列表。v-for指令还可以提供键名（key），以帮助Vue.js更好地管理它的显示顺序。

语法

<ul>
  <li v-for="(item, index) in items" :key="item.id">
     {{index + 1}}: {{ item.name }}
  </li>
</ul>

在上面的示例中，使用v-for指令循环遍历一个名为items 的数组，并在每次迭代中绑定一个名为item的临时变量。 访问临时变量时，还可以使用索引值index。

此外，要使用v-for指令时，需要提供一个用于跟踪每个元素的唯一键值。通常，使用item.id作为键值，因为这可以避免在更改列表时出现问题。

示例

<template>
  <div>
    <h1>Shopping List</h1>
    <ul>
      <li v-for="(item, index) in shoppingList" :key="item.id">
        {{index + 1}} - {{item.itemName}} - ${{item.price}}
        <button @click="deleteItem(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shoppingList: [
        { id: 1, itemName: 'Milk', price: 2 },
        { id: 2, itemName: 'Bread', price: 3 },
        { id: 3, itemName: 'Eggs', price: 4 }
      ]
    }
  },
  methods: {
    deleteItem(index) {
      this.shoppingList.splice(index, 1);
    }
  }
}
</script>

在上面的示例中，我们通过v-for指令渲染一个名为shoppingList的数组，并使用键值item.id来跟踪每个元素。 我们还绑定了一个@click事件，当点击删除按钮时，将在列表中删除相应的项。

总结

Nuxt.js中的v-for指令可用于循环遍历数据列表，并提供键名以帮助Vue.js更好地管理它的显示顺序。同时需要提供一个用于跟踪每个元素的唯一键值，以避免在更改列表时出现问题。