javascript - vue 多个下拉如何去重
阿神
阿神 2017-04-11 13:01:46
[JavaScript讨论组]

有N个下拉框 然后用1个model集合

如何实现 当某个下拉框选中1个值之后 其他下拉框的不显示选中的值呢

可否提供点思路呢

我本来是想用计算属性 但是计算属性是不能传参的 所以不能定位到当前的下拉框(因为其他的下拉肯定是不显示当先下拉框的选中 而当前的下拉肯定是有这个值的)

比如说下拉框1 选中值为A的项 我想实现的是 其他的下拉框是不显示A项的 但是下拉框1还是有A的
当下拉框1选中了B的时候 其他的下拉框A显示了 B消失了

阿神
阿神

闭关修行中......

全部回复(3)
大家讲道理

计算属性不能传参,但是能获得选中的值啊

<select v-model="select1">
    <option ...>...</option>
</select>
...
{
    data:{
        select1: "A",
        select2: "B",
        select3: "C"
    },
    computed: {
        option() {
            // 可以使用this.select1获取选中的值
            return optionAll.filter(this.select1)
        }
    }
}
PHP中文网

那就不要用同一个model,先分成n个,提交表单时再整合一下

高洛峰
<select>
    <option @change="handleChange('A')" v-for="item in getOptions('A')">...</option>
</select>
<select>
    <option @change="handleChange('B')" v-for="item in getOptions('B')">...</option>
</select>
{
    data(){
        return {
            selected: [],
        }
    },
    
    methods: {
        getOptions(index) {
            //根据选中项和当前项过滤。。有急事要走你可以试试这思路
        },
        
        handleChange(index){
            var that = this;
            return function(val){
                var v = {};
                v[index] = val;
                
                that.selected.push(v);
            }
        }
    },
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号