To load a different component based on a change in category value in Vue.js, you can use the computed
property to return the appropriate component based on the selected category value.
Here's an example code snippet:
<template> <div> <select v-model="selectedCategory"> <option v-for="category in categories" :key="category" :value="category"> {{ category }} </option> </select> <component :is="currentComponent"></component> </div> </template> <script> import Component1 from './Component1.vue'; import Component2 from './Component2.vue'; import Component3 from './Component3.vue'; export default { components: { Component1, Component2, Component3, }, data() { return { selectedCategory: 'Category 1', categories: ['Category 1', 'Category 2', 'Category 3'], }; }, computed: { currentComponent() { if (this.selectedCategory === 'Category 1') { return 'component1'; } else if (this.selectedCategory === 'Category 2') { return 'component2'; } else if (this.selectedCategory === 'Category 3') { return 'component3'; } else { return 'component1'; } }, }, }; </script>
In this example, we have a select
element that allows the user to choose a category. We use v-for
to loop through the categories
array and display each category as an option in the select
element.
We use the component
element to dynamically display the current component based on the selected category value. We use the :is
attribute to bind the component to the currentComponent
computed property.
We import the components (Component1, Component2, and Component3) at the top of our Vue component and register them as local components using the components
option.
We use the computed
property to return the appropriate component based on the selected category value. We use an if-else
statement to check the value of the selectedCategory
property and return the appropriate component name as a string.
Note that you can also use the watch
option to monitor changes to the selectedCategory
property and perform some actions based on the new value. However, using a computed
property is generally a cleaner and more efficient way to dynamically display components based on a data property.