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>