Как передать шаблон в компонент?

Question

[Сева]

Пишу велосипед - компонент для отображения грида.

grid.vue:

<tbody>
  <tr v-for="entry in filteredData"
    @click="toggleSelected(entry._id, $event)"
    :class="{ selected: selected.indexOf(entry._id) !== -1 }">
    <td v-for="key in columns">
      {{ entry[key['name']] }}
    </td>
  </tr>
</tbody>

goods.vue:

const gridColumns = [
        { name: 'sku', sortable: true, label: 'SKU' },
        { name: 'price', sortable: true },
        { name: 'inStock', label: 'Available' }
      ]

Например, последняя колонка - это true / false. Хочется показать соответственно отмеченный / неотмеченный чекбокс. Логика подсказывает сделать что-то вроде

{ name: 'inStock', label: 'Available', template: '<input type="checkbox" {{ entry[key["name"] == true ? 'checked' : '' }}' }

В ui-grid, который к AngularJS, что-то похожее было.

Не могу понять, как мне в родительском компоненте, если существует key['template'] - рендерить его содержимое, а если нет - {{ entry[key['name']] }}?

Answer 1

[vism]

почитайте про slot

если пишете не для самообучения, есть vuetable2 офигенская вещь, гибкая. там и пример слотов есть для кнопок и т.п.

Answer 2

[Максим Ерехинский]

https://vuejs.org/v2/guide/components.html#Dynamic...

Answer 3

[Evgeny Kulakov]

Мне кажется не стоит так делать, у вас есть данные в массиве, зачем их смешивать с шаблоном отображения. Докрутите сам шаблон, чтобы он отображал чекбокс если имя колонки равно inStock.

Comments

[Сева]

Грид же будет показывать не только товары, хардкодить неохота