how to render component from a component in vue js

Question

I have a component with following template:

    <div v-for:"item in store" v-bind:key="item.type">
       <a>{{item.type}}</a>
    </div>

I have another component called 'StoreComponent' On click of a element in first component I want to clear the current component and show the StoreComponent and able to pass item.type to StoreComponent.

I don't want to use router-link or router.push as I don't want to create a new url but override the current component with the new one depending on the item.type value.

StoreComponent.vue

     export default{
        name: 'StoreComponent',
        props: ['item'],
        data: function () {
          return {
             datum: this.item
           }
        },
       methods: {
          //custom methods
       }
    }

Steven B. Steven B. · Accepted Answer · 2018-05-09T02:32:59

You could use dynamic components and pass the item-type as a prop.

Vue.component('foo', {
  name: 'foo',
  template: '#foo'
});

Vue.component('bar', {
  name: 'bar',
  template: '#bar',
  props: ['test']
}); 

new Vue({
  el: "#app",
  data: {
    theComponent: 'foo',  // this is the 'name' of the current component
    somethingWeWantToPass: {
    	test: 123 // the prop we are passing
    },
  },
  methods: {
    goFoo: function() {
    	this.theComponent = 'foo';
    },
    goBar: function() {
    	this.theComponent = 'bar';
    },
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <button @click="goFoo">Foo</button>
  <button @click="goBar">Bar</button>
  <component :is="theComponent" v-bind="somethingWeWantToPass"></component>
</div>


<template id="foo">
  <div>
    Foo
  </div>
</template>

<template id="bar">
  <div>
    Bar
    <div>This is a prop:  {{ this.test }}</div>
  </div>
</template>

how to render component from a component in vue js

1 Answers