Добавьте атрибут v-html, только если слот не указан - PullRequest
Новая
       7

Добавьте атрибут v-html, только если слот не указан

0 голосов
/ 29 октября 2019

Примите во внимание следующее во фрагменте компонента: 

<tr v-for="row in rows" :key="row[rowKey]">
   <td v-for="col in cols">
      <slot v-if="col.bSlot" :name="col.bSlot" :row="row"></slot>
      <template v-else v-html="formatField(row, col)"></template>
   </td>
</tr>

Выше я хочу отобразить слот, если он задан, и если нет, отрисовать строку, возвращенную функцией форматирования без экранирования. Это не сработало, потому что я обнаружил, что v-html не работает с шаблонами. Следующее работает, но вам нужны дополнительные ненужные теги div, которые мне не нужны: 

<td v-for="col in cols">
   <slot v-if="col.bSlot" :name="col.bSlot" :row="row"></slot>
   <div v-else v-html="formatField(row, col)"></div>
</td>

Было бы неплохо, если бы это все еще работало, но было признано устаревшим: 

<td v-for="col in cols">
   <slot v-if="col.bSlot" :name="col.bSlot" :row="row"></slot>
   <template v-else>
      {{{formatField(row, col)}}}
   </template>
</td>

ЕдинственноеДругой вариант, который у меня остался, это то, что, поскольку нет места для размещения v-остального, я заставил formatField () ничего не возвращать, если указан слот: 

<td v-for="col in cols" v-html="formatField(row, col)">
   <slot v-if="col.bSlot" :name="col.bSlot" :row="row"></slot>
</td>

formatField(row, col) {
   if (col.bSlot) return;  // also tried returning null, undefined, and ''
   ...
}

Однако теперь слот нерендеринг, когда один предоставляется. Кажется, что Vue игнорирует слот, если предоставляется v-html. Так как мне не предоставить v-html, когда col.bSlot не предоставлен?

...