Question

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

现在在我的代码中使用提供商名称硬编码 - ＆gt; 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}}"

但他们显然没有任何想法，我怎么能以一种被认为是最佳实践的方式实现这一目标？ THX

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

create vuejs表示两个select标签之间的输入依赖关系

1 个答案: