Vue - рекурсивная вставка

#html #vue.js #recursion #syntax #vue-component

#HTML #vue.js #рекурсия #синтаксис #vue-компонент

Вопрос:

Я пытаюсь рекурсивно вставить элемент 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> :

Отсутствует ` (помещается прямо под <div…)

Любое предложение будет оценено

Ответ №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>

1. Большое вам спасибо за ваше понимание. Является ли приемлемой практикой использование v-for И v-if ? При поиске решения этой проблемы я прочитал, что это не так.

2. @MatiasGSP Я не знаю об ограничении, препятствующем использованию v-if внутри v-for цикла. Вы также можете рассмотреть v-html альтернативу, которая проще. Смотрите мой обновленный ответ.

3. Я действительно благодарен за ваш полный ответ. Я отмечаю ваш ответ как правильное решение!

4.@MatiasGSP v-for Следует избегать использования и v-if в одном и том же элементе, согласно руководству по стилю Vue. Использование v-if элемента внутри v-for цикла, похоже, в порядке.