如何在 v-for 循环中跟踪父元素？

Question

我正在尝试将包含 html 标记的 div 元素中的文本更改为实际的 html。我有一个 v-for 循环，它将所有文本项列出到 div 中。

<li v-for="item in items">
    <div id="description" class="content">{{item.description}}</div>
</li>

整个文本只包含 html 元素，而不是把它变成我不想要的 html。

我曾考虑通过一个调用document.innerHTML() 的函数对其进行抽水，但我不确定如何使父级具有唯一的ID 来调用它。我想使用唯一 ID 或某种参数来跟踪项目的父项。

Answer 1

为像我这样不读 cmets 的人回答这个问题 :-)

v-html 将render an HTML sn-p 到页面。

您问题的第二部分涉及告诉 Vue 每个元素都是独一无二的。您可以使用:key 执行此操作。这些为您的元素提供Vue's Virtual DOM a unique ID。您可以在数据中使用唯一元素作为键或迭代编号。

如果您需要访问 Vue 反应性之外的其他内容的 ID，请使用 Vue ref。

因此，将您的所有代码组合起来就变成了：

<li v-for="item in items" :key="item.name" ref="myItems">
    <div id="description" class="content" v-html="item.description"></div>
</li>

或用数字作为键

<li v-for="(item, n) in items" :key="n" ref="myItems">
        <div id="description" class="content" v-html="item.description"></div>
    </li>

注意：当在 v-for 中使用 ref 时，它们会生成一个数组。所以在这种情况下myItems.length == items.length 和myItems[n] 是唯一的引用。