@Zewkin
Я у мамы фронтэндер

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

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

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']] }}?
  • Вопрос задан
  • 515 просмотров
Решения вопроса 1
@vism
почитайте про slot

если пишете не для самообучения, есть vuetable2 офигенская вещь, гибкая. там и пример слотов есть для кнопок и т.п.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
nightflash
@nightflash
Front-end developer at JetBrains
Комментировать
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Мне кажется не стоит так делать, у вас есть данные в массиве, зачем их смешивать с шаблоном отображения. Докрутите сам шаблон, чтобы он отображал чекбокс если имя колонки равно inStock.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы