Vue.js 中使用 v-for 循环为每个元素设置唯一 ID

<template>
  <div>
    <div v-for="item in items" :key="item.id" :id="getItemId(item)">
      {{ item.name }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    getItemId(item) {
      return `item-${item.id}`;
    }
  }
};
</script>
<p>在上面的代码中，<code>v-for</code> 循环遍历 <code>items</code> 数组，为每个元素动态绑定一个 id 属性。<code>getItemId</code> 方法根据每个元素的 id 生成一个唯一的 id 值，这样每个元素都会有一个特定的 id。</p>
<p>注意，为每个循环的元素设置 id 时，需要使用 <code>:id</code> 来进行动态绑定，而不是直接使用 <code>id</code> 属性。这样可以确保每个元素的 id 是动态生成的。</p>