Question

我使用Vue创建了一个表单，并使用json数据创建了Vuetify，并将该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>

当我们从Vue.js中的select中选择某些选项时，如何显示或隐藏表单元素

1 个答案: