嘗試在 Vue.js 中動態添加 id 時未定義的 id

Question

這是一個簡單的待辦事項列表，我試圖在每個呈現的<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}中的數字，而只是未定義。 為什么？

Answer 1

如果items只是一個字符串數組，則沒有可用的id屬性。 在這種情況下，標准習慣用法是像這樣使用索引：

<li v-for="(i, index) in items" :id="`id${index}`" :key="index">

或者，您可以重塑您的數據，使其具有如下 ID：

[{ id: 0, text: 'foo' }, { id: 1, text: 'bar' }, { id: 2, text: 'baz' }]

例如，這可以作為計算屬性的一部分來完成。 請注意，這還需要對您的模板進行一些更改。