时间戳

首页 > 解决方案 > 如何在 v-for 循环中跟踪父元素？

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

问题描述

我正在尝试将包含 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 或某种参数来跟踪项目的父项。

标签： vue.js

解决方案

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

v-html将向页面呈现一个 HTML片段。

您问题的第二部分涉及告诉 Vue 每个元素都是独一无二的。你用:key. 这些为您的元素提供了 Vue 的虚拟 DOM 的唯一 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>

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

推荐阅读