[Vuejs]-How can I render a vuejs component from a string

by

0👍

✅

The best solution will depend on how generic you need to make it. You could go all-in with a render function but chances are you can achieve what you want just by tweaking the content of the slot.

For example, you could move the rendering of the table-row-options into the template:

<template>
  <tbody>
    <tr v-for="item in data">
      <td v-for="cell in cells">
        <table-row-options
          v-if="cell.key === 'option'"
          ...
        />
        <template v-else>
          {{ renderCell(item, cell) }}
        </template>
      </td>
    </tr>
  </tbody>
</template>

If you want to make this a bit more generic you could do something using v-bind:

<template>
  <tbody>
    <tr v-for="item in data">
      <td v-for="cell in cells">
        <component
          v-if="cell.content"
          v-bind="cell.content(item)"
        />
        <template v-else>
          {{ renderCell(item, cell) }}
        </template>
      </td>
    </tr>
  </tbody>
</template>

In this case cell.content would need to return a suitable object instead of a string, like this:

formatCells(){
  return [
    { path: 'id', label: 'Id'},
    { path: 'date', label: 'Date'},
    { path: 'damage', label: 'Damage'},
    { key: 'option', content: purchase => ({ is: 'table-row-options', title: 'Options', ... })
  ]
}

Leave a comment