vue的div单选多选v-for

效果图：

html代码： 

<div class="productDetails_choose">
    <h2>基本信息</h2><p>请根据实际情况完成所有评估选项,否则影响你的最终估价</p>
    <div class="choose">
      <div class="choose_list" v-for="(item,index) in chooseList" :key="index">
        <div class="choose_title" @click="chooseshowload(index,item.chooseshow)">
            <p>{{item.title}}</p>
            <i class="fa fa-angle-down" v-show="!item.chooseshow"></i>
            <i class="fa fa-angle-up" v-show="item.chooseshow"></i>
        </div>
        <div class="choose_button" v-if="!item.checkbox&&item.chooseshow">
            <button :ref="index+'s'+ind" v-for="(item2,ind) in item.list" :key="ind"  @click="choosebutton(index,ind,item2.id)">{{item2.name}}</button> 
        </div> 
        <div class="choose_button" v-if="item.checkbox&&item.chooseshow">
            <button :ref="index+'s'+ind" v-for="(item2,ind) in item.list" :key="ind"  @click="choosebutton2(index,ind,item2.id)">{{item2.name}}</button> 
        </div>                           
      </div>
    </div>
    <Button type="error" @click="valuationPrice" style="display:block;float:right">立即询价</Button>
</div>

js代码：

methods: {
    chooseshowload(index, chooseshow) {
        for (var i = 0; i < this.chooseList.length; i++) {
            if (index == i) {
                this.chooseList[i].chooseshow = !this.chooseList[i].chooseshow
            }
        }
    },  
    choosebutton(index, ind, id) {     
        var _self = this;
        this.chooseList.forEach((item, i) => {
            item.list.forEach((item2, i2) => {
                if (i == index&&i2==ind) {
                    item2.buttoncolor = !item2.buttoncolor
                    if (item2.buttoncolor) {                          
                        _self.$refs[index+'s'+ind][0].style.color = "blue"
                    } else {
                        _self.$refs[index+'s'+ind][0].style.color = "#999"
                    }
                }else if ( i == index&&i2!=ind) {
                    item2.buttoncolor = false                       
                    _self.$refs[i+'s'+i2][0].style.color = "#999"
                }
            })
        })
        this.chooseList
    },
    choosebutton2(index, ind, id) {    
        var _self = this;
        this.chooseList.forEach((item, i) => {
            item.list.forEach((item2, i2) => {
                if (i == index&&i2==ind) {
                    item2.buttoncolor = !item2.buttoncolor
                    if (item2.buttoncolor) {                          
                        _self.$refs[index+'s'+ind][0].style.color = "blue"
                    } else {
                        _self.$refs[index+'s'+ind][0].style.color = "#999"
                    }
                }
            })
        })
        this.chooseList
    },
    
},
mounted() {
    this.chooseList.forEach((item, i) => {
        item.list.forEach((item2, i2) => {
            item2.buttoncolor = false
        })
    })
}

 

this.chooseList  的  json

chooseList: [
                {
                    title: '购买渠道',
                    list: [
                        { id: '1', name: '国产' },
                        { id: '2', name: '港澳' },
                        { id: '3', name: '日版' },
                        { id: '4', name: '美版' }
                    ],
                    value: '',
                    chooseshow: true
                },
                {
                    title: '保修期剩余时间',
                    list: [
                        { id: '1', name: '1年' },
                        { id: '2', name: '2年' },
                        { id: '3', name: '3年' }
                    ],
                    value: '',
                    chooseshow: false
                },
                {
                    title: '机身颜色',
                    list: [
                        { id: '1', name: '金色' },
                        { id: '2', name: '银色' },
                        { id: '3', name: '黑色' },
                        { id: '4', name: '亮黑色' },
                        { id: '5', name: '玫瑰金' }
                    ],
                    value: '',
                    chooseshow: false
                },
                {
                    title: '网络制式',
                    list: [
                        { id: '13', name: '2G' },
                        { id: '14', name: '3G' },
                        { id: '15', name: '4G' },
                    ],
                    value: '',
                    chooseshow: false
                },
                {
                    title: '机身内存',
                    list: [
                        { id: '16', name: '16G' },
                        { id: '17', name: '32G' },
                        { id: '18', name: '64G' },
                        { id: '19', name: '128G' },
                        { id: '20', name: '256G' }
                    ],
                    value: '',
                    chooseshow: false
                },
                {
                    title: '外观成色',
                    list: [
                        { id: '21', name: '完好无损' },
                        { id: '22', name: '有少量磨损' },
                        { id: '23', name: '有严重磨损' },
                    ],
                    value: '',
                    chooseshow: false
                },
                {
                    title: 'iCloud是否有锁',
                    list: [
                        { id: '11656560', name: '是' },
                        { id: '56565656540', name: '否' }
                    ],
                    value: '',
                    chooseshow: false
                },
                {
                    title: '维修拆机史',
                    list: [
                        { id: '11056', name: '是' },
                        { id: '6760686', name: '否' }
                    ],
                    value: '',
                    chooseshow: false
                },
                {
                    title: '显示屏',
                    list: [
                        { id: '1109999', name: '是' },
                        { id: '06666', name: '否' }
                    ],
                    value: '',
                    chooseshow: false
                },
                {
                    title: '触摸及功能',
                    list: [
                        { id: '1150', name: '是' },
                        { id: '0333', name: '否' }
                    ],
                    value: '',
                    chooseshow: false
                },
                {
                    title: '是否存在以下问题（可多选）',
                    list: [
                        { id: '1', name: '111111' },
                        { id: '2', name: '222222' },
                        { id: '3', name: '333333' },
                        { id: '4', name: '444444' },
                        { id: '5', name: '555555' },
                        { id: '6', name: '666666' },
                        { id: '7', name: '777777' },
                        { id: '8', name: '888888' }
                    ],
                    checkbox: true,
                    value: [],
                    chooseshow: false
                }
            ],