Vue.js Vue在选择下拉列表时动态加载元素

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

选择此下拉列表中的项目后，我需要加载另一个包含相同项目的下拉列表：

在同一程序之后：

我能够硬编码，但显然这不是一个好的做法，因为我的重复受到我输入的元素数量的限制，除了读取值成为一个问题之外，因为每个输入有不同的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>

要通知的组织：

挑选
选择1
选择2
选择3
挑选
选择1
选择2
选择3
挑选
选择1
选择2
选择3

---

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

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

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

如果选项始终相同：

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

如果要将所有值合并在一起，可以创建计算属性：

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

---

这是可行的，但是想法是动态地获取选项，而且选项列表将始终保持不变。有可能只指向它一次吗？而不是将其写入data（）{return…？{{option}我用选项总是相同的方式编辑了我的答案。-你把V模型直接绑定到一个用于迭代别名的V。这将不能修改源数组的V。因为写别名就像修改函数局部变量。考虑使用一个对象数组，而不是在对象属性上使用V模型。是的，我没有测试就写了。你可以在

data

中做

下拉列表：[{value:null}，{value:null}，{value:null}，]

，

下拉列表[index-1]。value！==null

在

v-if

和

下拉列表中。值在
v-model
中更正。
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)
    }
}