Question

在初始页面加载时，我需要一个下拉字段：

选择了该下拉菜单中的项目后，我需要加载另一个具有相同项目的下拉菜单：

执行相同的步骤后：

我能够对其进行硬编码，但是显然这不是一个好习惯，因为我的重复受到我放入多少元素的限制，除了读取值之外，这还成为问题，因为我每个人都有不同的v模型名称输入：

<div>
    <label class='labelForm'>ORGANIZATION TO BE NOTIFIED:</label><br>
    <select :class="{defaultSelect : newAlert.productFamily === ''}" class='dropdownForm serviceForm' v-model='newAlert.productFamily'>
        <option selected disabled value=''>Select</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
     </select>

     <select v-if="newAlert.productFamily != ''" :class="{defaultSelect : newAlert.productFamily2 === ''}" class='dropdownForm serviceForm' v-model='newAlert.productFamily2'>
        <option selected disabled value=''>Select</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
     </select>

     <select v-if="newAlert.productFamily2 != ''" :class="{defaultSelect : newAlert.productFamily3 === ''}" class='dropdownForm serviceForm' v-model='newAlert.productFamily3'>
        <option selected disabled value=''>Select</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
     </select>
</div>

是否有更好的方法动态加载这些下拉菜单并一起读取所有值？

Answer 1

如果我正确理解了您的问题，我想您可以做这样的事情：

<select
    v-for="(dropdown, index) in dropdowns"
    :key="index"
    v-if="index === 0 || dropdowns[index - 1].selected !== null"
    v-model="dropdown.selected"
>
    <option :value="null" selected disabled>Select</option>
    <option
        v-for="option in dropdown.options"
        :key="option"
        :value="option"
        v-text="option"
    ></option>
</select>

-

data() {
    return {
        dropdowns: [
            {
                selected: null,
                options: [
                    'Option 1',
                    'Option 2',
                    'Option 3'
                ]
            },
            {
                selected: null,
                options: [
                    'Option 1',
                    'Option 2',
                    'Option 3'
                ]
            },
            {
                selected: null,
                options: [
                    'Option 1',
                    'Option 2',
                    'Option 3'
                ]
            },
        ]
    }
}

如果选项始终相同：

<select
    v-for="(dropdown, index) in dropdowns"
    :key="index"
    v-if="index === 0 || dropdowns[index - 1].value !== null"
    v-model="dropdown.value"
>
    <option :value="null" selected disabled>Select</option>
    <option
        v-for="option in options"
        :key="option"
        :value="option"
        v-text="option"
    ></option>
</select>

...

data() {
    return {
        options: ['Option 1', 'Option 2', 'Option 3'],
        dropdowns: [{ value: null }, { value: null }, { value: null }]
    }
}

如果您希望将所有值放在一起，则可以创建一个计算属性：

computed: {
    dropdownValues() {
        return this.dropdowns.map(d => d.selected)
    }
}

Vue在选择下拉菜单时动态加载元素

1 个答案: