CODEWITHSUNDEEP
vue.js
Alex
Alex

Reputation: 119

Adding a component by clicking a button

Vue.component('component-a', {
	template: '<h3>Hello world!</h3>'
})

new Vue({
  el: "#app",
  data: {
  	arr: []
    },
    methods: {
    	add(){
      	this.arr.push('component-a');
        console.dir(this.arr)
      }
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <component-a></component-a>
  
  <hr>
  <button @click="add">Add a component</button>
  <ul>
  <li v-for="component in arr"> {{ component }} </li>
</ul>
</div>

I want to insert a component a lot of times to the page by clicking a butoon, but instead of this only a component`s name is inserted. How to add a component itself?

Upvotes: 0

Views: 207

Answers (2)

Fergmux
Fergmux

Reputation: 1022

In your code the double curly braces do not reference the component itself but just the string you added with this.arr.push('component-a'); hence just the string being displayed.

If you would like this string to call the actual component you could use dynamic components.

Replacing {{ component }} with <component :is="component"/> would achieve the effect I think you're looking for.

However if you're only going to be adding one type of component I would consider adding the v-for to the component tag itself like so:

<component-a v-for="component in arr/>

Upvotes: 2

Jns
Jns

Reputation: 3257

Use the component element to render your component dynamically.

The usage is very simple: <component :is="yourComponentName"></component>

The ":is" property is required, it takes a string (or a component definition). Vue will then take that provided string and tries to render that component. Of course the provided component needs to be registered first.

All you have to do is to add the component tag as a child element of your list tag:

<li v-for="component in arr">
  <component :is="component"></component>
</li>


Vue.component('component-a', {
  template: '<h3>Hello world!</h3>'
})

new Vue({
  el: "#app",
  data: {
    arr: []
  },
  methods: {
    add() {
      this.arr.push('component-a');
      console.dir(this.arr)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <component-a></component-a>

  <hr>
  <button @click="add">Add a component</button>
  <ul>
    <li v-for="component in arr">
      <component :is="component"></component>
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions