How to show or hide form element when we select some option from select in vuejs

Question

I created a form using Vue and Vuetify using json data and looped that json to create form. How to the show input type text field when we select option in the first select element

<form>
   <div v-for="(field, index) in fields" :key="index">
      <v-select v-if="field.type=="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 v-else
         :label="field.label"
         v-model="field.model"
        ></v-text-field>
    </div>
</form>

Here is the array:

data(){
return{
    fields:[
    {
    type: "select"
    label: 'One',
    values: ["Virtual Partner", "some"],
    model: '',

    },
    {
    type: "text"
    label: 'Text',
    model: '',

    },
    {
    type: "select"
    label: 'Two',
    values: ["some 2", "some"],
    model: '',

    },
    {
    type: "select"
    label: 'Three',
    values: ["some 3", "some"],
    model: '',

    },
    ]
}
}

Please help. Thank you.

Harshal Patil Harshal Patil · Accepted Answer · 2018-06-28T06:57:20

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>

How to show or hide form element when we select some option from select in vuejs

1 Answers