如何解决Vue - 递归插入 <div>
我正在尝试递归插入一个包含按钮的 div 元素,如下所示:
<div v-for="column in 25" :key="column.id" class="columna">
<div v-for="row in 10" :key="row.id" class="recuadro">
{{ row == 1 ? 'paxXX' : `<div class="selector"><button onclick="colorCell()" /></div>` }}
</div>
</div>
基本上它首先插入行元素名称,然后使用具有不可见按钮的可选 div 填充行。
我在 <div class="selector"><button onclick="colorCell()" /></div>
中遇到语法错误:
缺少 `(位于
任何建议将不胜感激
解决方法
上面问题中的这段代码:
{{ row == 1
? 'PAXXX'
: `<div class="selector"><button onclick="colorCell()" /></div>`
}}
无效,因为您只能将文本(而不是 HTML)放置在双胡须内。
使用 v-if
和 v-else
按预期工作并避免语法错误:
<div v-for="column in 25" :key="column.id" class="columna">
<div v-for="row in 10" :key="row.id" class="recuadro">
<span v-if="row == 1">PAXXX</span>
<div v-else class="selector"><button onclick="colorCell()" /></div>
</div>
</div>
或者您可以使用 v-html
属性告诉 vue 将内容视为原始 HTML。
<div v-for="column in 25" :key="column.id" class="columna">
<div v-for="row in 10" :key="row.id" class="recuadro"
v-html="row == 1 ? 'PAXXX' : `<div class='selector'><button onclick='colorCell()' /></div>`"
>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。