Vue - 递归插入 <div>

Question

我正在尝试递归插入一个包含按钮的 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> 中遇到语法错误：

缺少 `（位于

任何建议将不胜感激

Answer 1

上述问题的代码：

{{ 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>

Vue - 递归插入 <div>

Vue - Recursively inserting <div>

html

syntax

recursion

vue.js

vue-component