在两个选择标签之间创建 vuejs 表单输入依赖项答案

【问题标题】：create vuejs form input dependency between two select tags在两个选择标签之间创建 vuejs 表单输入依赖项
【发布时间】：2017-07-16 09:39:55
【问题描述】：

试图在两个表单选择选项之间创建依赖关系，在第二个选择标签中，我想根据第一个选项选择显示数据。我知道我可以使用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>

现在在我的代码中，我使用硬编码的提供者名称 -> revcontent 但我希望这个值是 v-model="form.provider" 值。因此，如果用户选择 revcontent 作为提供者，实际发生的事情是显示这段代码的内容，但如果他选择了 Adsense，例如，逻辑会更改为：

  <el-option v-for="account in form.accounts.adsense"...>

我尝试了以下解决方案：

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

和

v-for="account in form.accounts.{{form.proivder}}"

但他们显然不知道如何以一种被视为最佳实践的方式实现这一目标？谢谢

【问题讨论】：

标签： vue.js

【解决方案1】：

您可以使用computed property 根据第一个选择的v-model返回第二个选择的选项，如下所示：

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

然后你可以遍历这个计算出来的[像这样的属性：

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

【讨论】：