Как показать или скрыть элемент формы, когда мы выбираем какую-то опцию из select в vuejs

Question

Я создал форму, используя Vue и Vuetify, используя данные json, и сделал цикл json для создания формы. Как отобразить текстовое поле типа ввода, когда мы выбираем опцию в первом элементе выбора

<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>

Вот массив:

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: '',

    },
    ]
}
}

Пожалуйста, помогите. Спасибо.

Answer 1

Предполагая, что вы хотите отобразить несколько полей выбора в зависимости от полученного json, вы должны сначала удалить предложение v-else, поскольку каждое поле выбора должно сопровождаться текстовым полем ввода. Кроме того, вам не нужна двусторонняя привязка с использованием v-model в текстовом поле ввода, так как вам нужно только взаимодействие с выбором ввода.

Ваш код формы будет выглядеть так:

<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>