在两个选择标签之间创建vuejs表单输入依赖关系

尝试在两个表单选择选项之间创建依赖关系，其中第二个选择标签中我想根据第一个选项选择显示数据。我知道我可以使用v-if，但它并不真的给我提供最佳实践的解决方案。现在在两个选择标签之间创建vuejs表单输入依赖关系

<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作为供应商究竟happenning就是表明罪这段代码，但如果他选择的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

来源

2017-07-16 yariv bar

可以使用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>

来源

2017-07-16 09:52:14

谢谢，像魅力和非常有用的作品 –

在两个选择标签之间创建vuejs表单输入依赖关系

回答

相关问题