在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ Vue.js多選問題

Vue.js多選問題

用vue做一個多選的功能，另外用戶可以也可以不選，但是至少要選擇一個才能提交

.item(v-for="(item,index) in taxData.caijing"
  @click="taxDataForm.push({caijing: 'item'})") {{item}}

點擊push進(jìn)去數(shù)組還是報錯

圖片描述

圖片描述

回答
編輯回答
祉小皓

寫了個小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">打印選擇結(jié)果</button>
    </div>


<script>
    var app = new Vue({
        el:'#app',
        data(){
            return{
                list:[
                {name:'財經(jīng)新聞',datas:[{name:'股票'},{name:'科技'},{name:'產(chǎn)業(yè)'}]},
                {name:'熱點聚焦',datas:[{name:'股票'},{name:'科技'},{name:'產(chǎn)業(yè)'}]},
                  {name:'行業(yè)資訊',datas:[{name:'股票'},{name:'科技'},{name:'產(chǎn)業(yè)'}]},
                ],
                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>
2017年4月3日 20:18
編輯回答
尕筱澄

加上選中或者點擊的事件，樓上的說法就行

2017年6月22日 22:57
編輯回答
夏木

看題主的意思應(yīng)該底下每個也可以多選,那就三個數(shù)組,每次點擊的時候都相應(yīng)的push到數(shù)組中,提交之前判斷三個數(shù)組的長度,任意一個不為0即可.

2018年1月1日 16:41
編輯回答
青瓷

綁定3個值

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

提交的時候判斷a,b,c是否至少有一個有值，沒有的話就阻止提交

2017年4月20日 00:05
編輯回答
生性

這個需求，最合適用 :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實現(xiàn)多選組件，以及講堂 寫 CSS 也要開腦洞：萬能的 :checked + label

2017年1月13日 00:46
編輯回答
孤慣

額，這名字取得也挺有意思

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
    }
}
2017年12月27日 16:10