vue中，radio或者checkbox如何默认选中

Question

有一个radio或者checkbox选项框组，如下：

 <ul>
    <li class="item" v-for="item in attrList">
        <input :type="radio"
               :id="getId()"
               name="attrItem"
               :class="inputClass"
               :value="item.propertyValueId"
               v-model="checkedList">
        <label :for="getId(false)" :title="item.valueData">{{ item.valueData}}</label>
    </li>
</ul>
        

 data() {
        return {
            checkedList: [this.propertyValueId]
        }，
        props: {
            propertyValueId: {
                type: Number,
                default: null
            },
            // 0-radio  1-checkbox
            inputType: {
                type: Number,
                default: 1
            },
            
            attrList: {
                type: Array,
                default: []
            }
        }   
     

其中，attrList的数据格式如下：

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

如何根据传入的propertyValueId来默认选中响应的框？

Answer 1

 <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'
        }
    }
    
    
    checkbox和radio要区别对待，radio不能放在数组里面。

Answer 2

<li class="item" v-for="item in attrList">
    <input type="radio"
           :id="getId()"
           name="attrItem"
           :class="inputClass"
           :value="item.propertyValueId"
           :checked="ifchecked(item.propertyValueId)"
           v-model="checkedList">
    <label :for="getId(false)" :title="item.valueData">{{ item.valueData}}</label>
</li>
然后再methods里面定义
ifchecked(prop){
    if(prop=='??'){//逻辑自己写
    return true}
}
我测试过了，可以的，type前面的:去掉

Answer 3

把checkedList放到vue的data里面，且给它一个默认值。BTW，radio button是单选，所以怎么能命名对应的model叫checkedList呢？