[Vuejs]-How to display the components based on category selection

by

3👍

✅

Here is the solution, although it has arbitrary values, as your example code is not complete.

<step1 
    currentStep="some_value" 
    step1="another_value"
    v-if="'step1' === select_value"
/>
<step2 
    currentStep="some_value" 
    step2="another_value"
    v-if="'step2' === select_value"
/>
<step3 
    currentStep="some_value" 
    step1="another_value" 
    step2="yet_another_value"
    v-if="'step3' === select_value"
/>
<step4 
    currentStep="some_value" 
    step1="another_value" 
    step2="yet_another_value"
    v-if="'step4' === select_value"
/>

The variable select_value is the selected value of the select element in your HTML. To use it you have to bind the value of the select in the Vue model.

For example you could use inside your Vue app something like that:

var app = new Vue(
    {
        el: '#app',
        data: function () {
            return {
                select_value: ''
                // rest of your data properties
            }
        }
        // rest of your component functionality
    }
);

and then change your select element to something like that:

<select v-model="select_value">
    <option value="step1">single family homes</option>
    <option value="step2">real state</option>
    <option value="step3">IT industry</option>
    <option value="step4">Some Other Option</option>
</select>

By making those changes you will have at the end the result you need.

👤KodeFor.Me

1👍

Try out to give a value to your options then using dynamic component :

<select v-model="select_value">
    <option value="1">single family homes</option>
    <option value="2">real state</option>
    <option value="3">IT industry</option>
    <option value="4">Some Other Option</option>
</select>

and :

<component currentStep="some_value" step1="another_value"  step2="yet_another_value" :is="`step${select_value}`" />
👤Boussadjra Brahim

Leave a comment