实现菜单功能的时候出现bug：Elements in iteration expect to have ‘v-bind:key‘ directives（已解决）

<template>
    <ul id="array-rendering">
        <li v-for="item in items"> {{ item.message }} </li>
    </ul>
</template>

<script>
export default {
    name: 'item',
    data() {
        return {
            items: [ { message: 'Foo' }, { message: 'Bar' }]
        }
    }
}
</script>

更正，需要加：key

<template>
    <ul id="array-rendering">
        <li v-for="item in items" :key="item.id"> {{ item.message }} </li>
    </ul>
</template>

<script>
export default {
    name: 'item',
    data() {
        return {
            items: [ { message: 'Foo' }, { message: 'Bar' }]
        }
    }
}
</script>

与原型代码相比较，ul的id没有了，mount的挂载也没有了。不知道有什么影响。

实现出来以后，也没有两个点。
不知道怎么加。

<ul id="array-rendering">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
Vue.createApp({
  data() {
    return {
      items: [{ message: 'Foo' }, { message: 'Bar' }]
    }
  }
}).mount('#array-rendering')