这是一个简单的待办事项列表，我正在尝试在每个呈现的 <li> 中添加一个 id。每个 id 应该命名为不同（显然）但相似的名称：“id0”，“id1”，“id2”......等等

该数字来自指令 v-for="i in items"

我这样做是这样的：

<li :id="`id${i.id}`" v-for="i in items" :key="`id${i.id}`">

完整代码：

<ul class="item-list-ul">
        <li :id="`id${i.id}`" v-for="i in items" :key="`id${i.id}`">{{ i }}
          <div class="item-butons">
            <b-button class="done-btn" @click="strikeItem(i)" size="sm" variant="outline-dark">DONE!</b-button>
            <b-button class="delete-btn" @click="deleteItem(i)" size="sm"  variant="warning">Delete</b-button>
          </div>
        </li>
      </ul>

我的 items 数组：

data () {
      return {
          items: ["five", "<li>", "should","be","rendered"]
        }
    }

但是当我在控制台中检查 <li> 的新动态创建的 id 的名称时，它们只是显示 idundefined ，而在例如有 3 个 <li> 的情况下，它们应该显示如下：

id0
id1
id2

但是在控制台中没有任何错误。看起来 vue-html 根本没有读取 ${i.id> 中的数字，而只是读取未定义的数字。为什么？