[Vuejs]-How to show or hide form element when we select some option from select in vuejs

by

0👍

Assuming that you want to show multiple select boxes depending upon the json you receive, you should first remove v-else clause because every select box has to be accompanied by the input text box. Also, you don’t want two-way binding using v-model on input text box as you only care about select input interaction.

Your form code would look like:

<form>
    <div v-for="field in fields" :key="field.label" v-if="field.type === 'select'">
        <v-select
            :items="field.values"
            :label="field.label"
            v-model="field.model">
        </v-select>

        <!-- to show the below text field when we select --> 
        <!--option from select -->                                   
        <v-text-field
            :label="field.label"
            :value="field.model">
        </v-text-field>
    </div>
</form>

Leave a comment