How to dynamically render vue.js components?

Question

does anyone know of a way to dynamically render vue.js components? For example, I have a table component that should render different buttons based on the prop definition:

Vue.component('my_table', {
    template: '#my_table',
    props: {
      data: Array,
      columns: Array,
      actions: Array
    }
});

Ideally, my template would be defined in the tmpl value of my action object:

<tbody>
    <tr v-for="entry in data">
      <td v-for="key in columns">
        {{entry[key.field]}}
      </td>
      <td v-for="action in actions">
        {{ action.tmpl }}
      </td>
    </tr>
</tbody>

Here's my fiddle:

https://jsfiddle.net/zfya92dh/43/

Anyone have any ideas?

Thanks in advance!

vuejs.org/v2/guide/components.html#Dynamic-Components

Bert
– Bert

2017-03-24 19:34:30 +00:00
Commented Mar 24, 2017 at 19:34 — Bert
– Bert, Commented Mar 24, 2017 at 19:34

Bert · Accepted Answer · 2017-03-24 19:44:56Z

1

<component :is="action.tmpl"></component>

Here is your fiddle revised.

const button1 = Vue.extend({
    template:'<button class="btn btn-primary">View</buttton>'
})

const button2 = Vue.extend({
  template:'<button class="btn btn-primary" @click="some_method">Delete</buttton>',
  methods:{
     some_method(){
         alert('clicked')
     }
  }
})

And the relevant data.

 data: {
    actions: [
    {
      name: 'view',
      label: 'View Company',
      method: 'click',
      tmpl: button1
    },
    {
      name: 'delete',
      label: 'Delete Company',
      method: 'click2',
      tmpl: button2
    },
  ],

edited Mar 24, 2017 at 19:44

answered Mar 24, 2017 at 19:35

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 22:46:16Z

1

You just want to insert HTML instead of plain text? Change

<td v-for="action in actions">
    {{ action.tmpl }}
</td>

to

<td v-for="action in actions" v-html="action.tmpl"></td>

However, if your HTML includes Vue markup, the markup will not be respected. You will need to create actual components to represent each of your configurations and then use :is to tell Vue which one to use at a given time. Vue doesn't use string-based templating, so there is no way to make passing a template string work.

edited Jul 15, 2022 at 22:46

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 24, 2017 at 19:40

Roy J

44k10 gold badges84 silver badges106 bronze badges

Collectives™ on Stack Overflow

How to dynamically render vue.js components?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related