[ VUE ] How to pass a template to a component?

Question

JavaScript

Hello,
I'm writing a bicycle - a component for displaying a grid.
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' }
      ]

For example, the last column is true/false. I would like to show the checked / unchecked checkbox accordingly. Logic suggests doing something like

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

In ui-grid, which is for AngularJS, there was something similar.
I can't figure out how I can key['template']render its content in the parent component, if it exists, and if not - ? Thank you! {{ entry[key['name']] }}

Answer 1

read about slot
if you are not writing for self-study, there is vuetable2 awesome thing, flexible. there is an example of slots for buttons, etc.

Answer 2

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

Answer 3

It seems to me that you should not do this, you have data in an array, why mix it with a display template. Tweak the template itself so that it displays a checkbox if the column name is equal to inStock.