vue.js - Vue2.0 单(多)选框绑定对象的问题

问题描述

问 题

Template:

<dl class="attribute" v-for="attribute in attributes">
  <dt>{{attribute.name}}</dt>
  <dd>
    <label v-for="value in attribute.values" v-bind:class="selectedAttributes['attr-'+attribute.id] == value.id ? 'selected' : ''">
      <input type="radio" name="a" v-bind:value="value.id" v-model="selectedAttributes['attr-'+attribute.id]">
      {{value.name}}
    </label>
  </dd>
</dl>

JS:

export default {
  data () {
    return {
      selectedAttributes: {}
    }
  }
}

效果图：

想要实现的效果：

点击label AA，则对应的radio/checkbox为选中，同时label背景色改变

遇到的问题：

【点击label AA，则对应的radio/checkbox为选中】可以实现，对应的【selectedAttributes】的值也能改变，但是【同时label背景色改变】实现不了。。
因为属性和属性的可选值都是循环出来的，绑定model就成问题了。。所以，想问问这种情况下，有没有什么好的解决方案？

解决方案

这种情况下用css3 就最合适了

  <label v-for="item in items">
        <input type="checkbox" name="choose" class="choose"
               v-model="checkboxItem"
               value="{{ item.val }}">
        <i class="bg"></i>
        <span class="text">{{ item.val }}</span>
  </label>
    
<style scoped>
    label{
        margin: 10px;
        position: relative;
        width: 50px;
        height: 35px;
    }
    
    .text{
        display:block;
        width:100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 8;
    }
    
    .bg{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
        background: #fff;
    }
    .choose{
        width: 100%;
        height: 100%;
        margin: 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
    }
    .choose:checked + .bg {
        background: red;
    }
</style>            
            
            
            
            
            

这篇关于vue.js - Vue2.0 单(多)选框绑定对象的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！