vue中radio或者checked如何默认选中？

最新推荐文章于 2024-05-16 10:30:37 发布

原创最新推荐文章于 2024-05-16 10:30:37 发布 · 1.2w 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

27 篇文章

订阅专栏

本文介绍在VUE框架下如何正确处理Checkbox和Radio的不同应用场景，特别是当需要将选项值放入数组时，Checkbox与Radio的行为差异。通过具体代码示例展示了如何设置属性和数据绑定。

 attrList数据：

[         
  {
    propertyValueId: 1,
    valueData: "sku1 text alias"
  },
   {
    propertyValueId: 2,
    valueData: "sku1 text alias"
  },
   {
    propertyValueId: 3,
    valueData: "sku1 text alias"
  }
]

 <ul>
    <li class="item" v-for="item in attrList">
        <input :type="inputClass"
               :class="inputClass"
               :id="getId()"
               :value="item.propertyValueId"
               v-model="checkedList">
        <label :for="getId(false)" :title="item.valueData">{{ item.valueData}}</label>
    </li>
</ul>
                
data() {
    return {
        checkedList: this.inputType === global.INPUT_TYPE.CHECK_BOX ? [] : this.propertyValueId
    }
},            
   

 computed: {
        // checkbox or radio
        inputClass() {
            return this.inputType === global.INPUT_TYPE.CHECK_BOX ? 'checkbox' : 'radio'
        }
    }