Vue.js 在两个select标记之间创建vuejs表单输入依赖项

尝试在两个表单选择选项之间创建依赖关系，在第二个选择标记中，我希望显示基于第一个选择选项的数据。我知道我可以使用v-if，但它并没有给我一个感觉像是最佳实践的解决方案。我的表格相关部分如下所示：

<el-form-item label="Provider">
    <el-select v-model="form.provider" placeholder="select provider">
        <el-option v-for="provider in form.providers"
                   :label="provider"
                   :value="provider">{{provider}}
        </el-option>
    </el-select>
</el-form-item>
<el-form-item label="Accounts">
    <el-select v-model="form.account" placeholder="Select account">
        <!--****here it is****-->
        <el-option v-for="account in form.accounts.revcontent"
                   label="account"
                   value="account">{{account}}</el-option>
    </el-select>
</el-form-item>

computed: {
    secondSelect(){
        return this.form.accounts[this.form.provider];
    }
} 

我尝试了以下解决方案：

v-for="account in form.accounts.form.provider" 

及

但是他们显然不知道我该如何以最好的方式考虑这一点？thx

您可以使用返回基于第一个选择的v型的第二个选择的选项，如下所示：

<el-form-item label="Provider">
    <el-select v-model="form.provider" placeholder="select provider">
        <el-option v-for="provider in form.providers"
                   :label="provider"
                   :value="provider">{{provider}}
        </el-option>
    </el-select>
</el-form-item>
<el-form-item label="Accounts">
    <el-select v-model="form.account" placeholder="Select account">
        <!--****here it is****-->
        <el-option v-for="account in form.accounts.revcontent"
                   label="account"
                   value="account">{{account}}</el-option>
    </el-select>
</el-form-item>

computed: {
    secondSelect(){
        return this.form.accounts[this.form.provider];
    }
} 

然后，您可以循环使用此computed[属性，如下所示：

<el-form-item label="Provider">
    <el-select v-model="form.provider" placeholder="select provider">
        <el-option v-for="provider in form.providers"
                   :label="provider"
                   :value="provider">{{provider}}
        </el-option>
    </el-select>
</el-form-item>
<el-form-item label="Accounts">
    <el-select v-model="form.account" placeholder="Select account">
        <!--****here it is****-->
        <el-option v-for="account in secondSelect"
                   label="account"
                   value="account">{{account}}</el-option>
    </el-select>
</el-form-item>