I am faced with a scenario where I have a component that has the following template:
<div v-for:"item in store" v-bind:key="item.type">
<a>{{item.type}}</a>
</div>
Additionally, I have another component named 'StoreComponent'. The requirement is to clear the current component upon clicking an element in the first component and display the StoreComponent. Furthermore, I need to be able to pass the item.type value to the StoreComponent when this transition occurs.
To achieve this functionality, I am looking for a solution that does not involve using router-link or router.push methods as I do not wish to create a new URL. Instead, my preferred approach is to override the current component with the new one based on the item.type value.
Below is the code snippet for the StoreComponent (StoreComponent.vue):
export default{
name: 'StoreComponent',
props: ['item'],
data: function () {
return {
datum: this.item
}
},
methods: {
//custom methods
}
}