用vue做一个多选的功能，另外用户可以也可以不选，但是至少要选择一个才能提交 .item(v-for="(item,index) in taxData.caijing" @click="taxDataForm.push({caijing: 'item'})") {{item}} 点击push进去数组还是报错

Vue.js多选问题

发布于
2018-03-07

绑定3个值

{
    a: '',
    b: '',
    c: ''
}

提交的时候判断a,b,c是否至少有一个有值，没有的话就阻止提交

Maosheng

26321832

发布于
2018-03-07

额，这名字取得也挺有意思

computed: {
    disabled () {
        return (!this.a && !this.b && !this.c)
    }
},
methods: {
    handlerA (val) {
        this.a = val
    },
    handlerB (val) {
        this.b = val
    },
    handlerC (val) {
        this.c = val
    }
}

前端程序媛

1k31329

发布于
2018-03-07

看题主的意思应该底下每个也可以多选,那就三个数组,每次点击的时候都相应的push到数组中,提交之前判断三个数组的长度,任意一个不为0即可.

angel_郁

1.1k1621

发布于
2018-03-07

加上选中或者点击的事件，楼上的说法就行

Reachel

2.6k1114

发布于
2018-03-07

更新于
2018-03-07

写了个小demo，具体判断你可以自己参考一下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
  <style>
        span{display:inline-block; margin-right:10px; border:1px solid #000;}
        span.active{border:1px solid red;}
    </style>
</head>
<body>
<div id="app">
        <div v-for="(item,index) in list">
            {{item.name}}
            <div>
                <span v-for="(itemB,indexB) in item.datas" @click="check(index,indexB)" :class={'active':itemB.isCheck}>{{itemB.name}} {{itemB.isCheck}}</span>
            </div>
        </div>
        <button @click="submit">打印选择结果</button>
    </div>


<script>
    var app = new Vue({
        el:'#app',
        data(){
            return{
                list:[
                {name:'财经新闻',datas:[{name:'股票'},{name:'科技'},{name:'产业'}]},
                {name:'热点聚焦',datas:[{name:'股票'},{name:'科技'},{name:'产业'}]},
                  {name:'行业资讯',datas:[{name:'股票'},{name:'科技'},{name:'产业'}]},
                ],
                results:{}
            }
        },
        mounted(){
            this.list.map((v,i)=>{
                v.datas.map((val,index)=>{
                    this.$set(val,'isCheck',false);
                })
            });
        },
        methods:{
            check(index,indexB){
                let data = !this.list[index].datas[indexB].isCheck
                this.$set(this.list[index].datas[indexB],'isCheck',data);
                if(data){
                    if(typeof(this.results[index]) == 'undefined') this.results[index] = [];
                this.results[index].push(this.list[index].datas[indexB].name);
                }else{
                    let rIndex = this.results[index].indexOf(this.list[index].datas[indexB].name);
                    this.results[index].splice(rIndex,1)
                }
            },
            submit(){
                this.list.map((v,i)=>{
                    if(typeof(this.results[i]) == 'undefined'){
                        this.results[i] = [];
                    }
                })
                console.log(this.results)
            }
        }
    })
</script>

</body>
</html>

Meathill

22.6k133642

发布于
2018-03-07

这个需求，最合适用 :checked + label 来做，写个简单的代码范例吧：

.item(v-for="(item,index) in taxData.caijing")
  input(type="radio", v-model="caijing", name="caijing", :id="'caijing-' + index")
  label(:for="'caijing-' + index") {{item}}

export default {
  data() {
    return {
      caijing: null,
    };
  },
}

利用 <label> 的特性就可以完成需求，<input> 可以为 radio 也可以为 checkbox。

题主有时间的话，推荐看下我的文章：纯CSS实现多选组件，以及讲堂写 CSS 也要开脑洞：万能的 :checked + label

Vue.js多选问题

你尚未登录，登录后可以

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

多个vue项目，后台接口都是一样的，每个vue项目的同一个页面都只是一小部分修改，怎样把公共的代码提出来复用？

如何实现从一个div中拖拽dom到另一个div容器？

electron如何屏蔽鼠标上的前进后退快捷键？