CODEWITHSUNDEEP
javascriptvue.js
Jack022
Jack022

Reputation: 1257

Vue - how to append components?

I'm trying to create a button that, once is pushed, adds a child component to my component. My code works, except that the HTML is being parsed as a string, here is the parent component:

<template>
  <div id="app">
    <li v-for="item in items">
      {{ item.component }}
    </li>
  </div>
</template>

<script>

export default {
  props:{},
  data(){
    return { 
      items: []
    }
  },
  mounted() {},
  computed: {},
  methods: {
    addItem(){
      this.items.push({component: '<testcomponent />'})
    }
  }
}
</script>

And the child component is very basic:

<template>
  <div id="app">
    <h1>Testing</h1>
  </div>
</template>

So the problem with my code is that, every time i push the button, instead of loading every time a new instance of the child component, it will parse the HTML as a string: '<testcomponent />'. How can i fix this? Thanks in advance!

Upvotes: 2

Views: 1195

Answers (1)

Majed Badawi
Majed Badawi

Reputation: 28404

You can push the component name, and use <component :is="item.component"/> in the v-for as follows:

const testcomponent = Vue.component('testcomponent', {
  template: '#testcomponent',
});

new Vue({
  el:"#app",
  components: { testcomponent },
  data() { return {  items: [] } },
  methods: {
    addItem() {
      this.items.push({ component: 'testcomponent' });
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<template id="testcomponent">
  <div><h1>Testing</h1></div>
</template>

<div id="app">
  <button @click="addItem">Add</button>
  <li v-for="item in items">
    <component :is="item.component"/>
  </li>
</div>

Upvotes: 2

Related Questions