How to create component dynamically from a json in Vuejs2

Question

I'm trying to populate a table dynamically with cells component.

input structure looks like:

tableData: {
    headers: ['1', '3', '2', '4'],
    rows: [
      [{h: '1', t: 'Sample', v: {name: 'logan'}},
      {h: '2', t: 'Sample', v: {name: 'dgd'}},
      {h: '3', t: 'Sample', v: {name: 'logasdn'}},
      {h: '4', t: 'Sample', v: {name: 'loezgan'}}]
    ],
    showHeaders: ['1', '2', '3']
  }

the html sections looks like that:

<!--table data-->
    <tr v-for='(row,rowIndex) in tableData.rows'>
      <td><input type='checkbox'></td>

      <td v-for="(element,colIndex) in row">

        <component is='Sample' v-bind='element.v' ></component>
      </td >

    </tr>

When I pass 'Sample' (the component name) as parameter it works, but its not when I replace 'Sample' by 'element.t' or {{element.t}} which I don't understand.

Does anyone knows why its not working and how to do that?

could you elaborate a bit more? are you talking about the tr tag? — Logan Schwartz
– Logan Schwartz, Commented Aug 24, 2017 at 16:26

thanksd · Accepted Answer · 2017-08-24 16:57:23Z

1

You need to bind to is via v-bind:is or the shorthand :is:

<component :is='element.t' v-bind='element.v'></component>

answered Aug 24, 2017 at 16:57

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create component dynamically from a json in Vuejs2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related