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
       }
    }

tony19 · Accepted Answer · 2022-07-15 22:18:08Z

3

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>

edited Jul 15, 2022 at 22:18

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 9, 2018 at 2:32

Steven B.

9,4323 gold badges28 silver badges50 bronze badges

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

3 Comments

user9170426 Over a year ago

So for webpack projects, aren't you supposed to have only one template and script tag in each .vue file?

user9170426 Over a year ago

and the prop to be bind is dynamic depending on the default template like in your case it's foo so data has to be passed from foo based on the current item it is processing.

Steven B. Over a year ago

@developer Yes, only one template per component. So I would have three components. The wrapper that tracks the value of the selected item type and holds the component tag. Then the other two components StoreComponent and the one where you select the item type. Then when you select the item type you need to emit an event back to the wrapping component so its knows and can pass the correct value to the StoreComponent.

Collectives™ on Stack Overflow

how to render component from a component in vue js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related