关于antdv组件a-checkbox的checked属性为true也不生效问题解决

278 阅读1分钟

image.png

        <a-form-item label="兑换限制" :required="true">
          <div style="display: flex">
            <span style="margin-right: 10px">用户兑换次数:</span>
            <div>
              <!-- <a-checkout-group> -->
                <div><a-checkbox :checked="goodsObj.day_use == 0 ? false : true"> 每天 </a-checkbox> <a-input v-model="goodsObj.day_use" style="width: 100px" /> 次/人</div>
                <div style="margin: 10px 0"><a-checkbox :value="1" :checked="goodsObj.month_use == 0 ? false : true"> 每月 </a-checkbox> <a-input v-model="goodsObj.month_use" style="width: 100px" /> 次/人</div>
                <div><a-checkbox :value="2" :checked="goodsObj.year_use == 0 ? false : true"> 每年 </a-checkbox> <a-input v-model="goodsObj.year_use" style="width: 100px" /> 次/人</div>
              <!-- </a-checkout-group> -->
            </div>
          </div>
          <div style="display: flex; margin-top: 30px">
            <span style="margin-right: 10px">商品兑换数量:</span>
            <div>
              <div style="margin-bottom: 10px"><a-checkbox :value="3" :checked="goodsObj.day_goods == 0 ? false : true"> 每天 </a-checkbox> <a-input v-model="goodsObj.day_goods" style="width: 100px" /></div>
              <div><a-checkbox :value="4" :checked="goodsObj.day_month == 0 ? false : true"> 每月 </a-checkbox> <a-input v-model="goodsObj.day_month" style="width: 100px" /></div>
            </div>
          </div>
        </a-form-item>

解决办法:

原因就在外面套的这层a-checkout-group上,把他去掉就好了,注释后发现就可以回显成功了
还有一个需要注意的地方,如果设置的是checked,渲染出来之后选中状态无法更改,需要把checked修改为defaultChecked