checkbox动态绑定数据(无法绑定问题)报length错误

最近在使用vue开发考试系统时,前端遇到了这样一个问题。

[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'length')"

image-20220321155529905

<!-- 把值绑定到存放id和答案对应的关系对象的一个属性-->
<el-radio-group v-model="studentAnswers[question.id]" >
  <!--循环遍历所有选项 -->
                      <el-radio-button
                          v-for="(item,index) in question.options"
                          v-if="question.type===0"
                          :label="index"
                          style="margin-bottom: 10px;width: 100% ;">{{
                          String.fromCharCode('A'.charCodeAt(0) + index)
                        }}、{{ item }}
                      </el-radio-button>
</el-radio-group>

原因

因为系统初始化,studentAnswers这个对象中所有属性对应的值都不可能是一个array类型,checkbox需要绑定一个数组类型的数据。

解决

那就要在渲染之前给这个属性初始化成一个数组形式,如果是在created钩子函数中直接使用,也是没有用的,需要使用vue的api添加。

image-20220321160501984

//遍历所有的问题
this.testPapar.questions.forEach(v=>{
  //如果是多选题,就初始化属性为空数组
        if(v.type===2){
          Vue.set(this.studentAnswers,v.id,[])
        }
      })
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个完整的Vue程序,满足您提出的要求: ```html <template> <div> <el-checkbox v-model="checkAll" @change="handleCheckAll">{{ checkAll ? '全不选' : '全选' }}</el-checkbox> <el-checkbox-group v-model="checkedCities" @change="handleCheckedCities"> <el-checkbox v-for="city in cities" :key="city.value" :label="city.value">{{ city.label }}</el-checkbox> </el-checkbox-group> </div> </template> <script> export default { data() { return { cities: [ { value: 'Beijing', label: '北京' }, { value: 'Shanghai', label: '上海' }, { value: 'Guangzhou', label: '广州' }, { value: 'Shenzhen', label: '深圳' } ], checkedCities: [], checkAll: false } }, created() { // 从后端获取数据,将默认选中的城市加入checkedCities数组 this.checkedCities = ['Beijing', 'Shanghai'] }, methods: { handleCheckAll(checked) { if (checked) { this.checkedCities = this.cities.map(city => city.value) } else { this.checkedCities = [] } }, handleCheckedCities(checkedCities) { if (checkedCities.length === this.cities.length) { this.checkAll = true } else { this.checkAll = false } } } } </script> ``` 该程序中,使用`v-for`指令动态生成多个`el-checkbox`复选框。使用`v-model`指令动态绑定数据,在`created`钩子函数中获取后端数据,将默认选中的城市加入`checkedCities`数组中。同时,使用`@change`监听复选框状态的变化,在`handleCheckAll`方法中实现全选、全不选功能,在`handleCheckedCities`方法中实现单选或多选功能。此外,使用`computed`计算属性或`watch`监听动态绑定的变量,可以在变量发生变化时保存和刷新视图。 值得注意的是,在Vue中,建议使用`v-model`指令将复选框的状态绑定到Vue实例的数据上,而不是直接操作DOM。这样做可以提高代码的可读性和可维护性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值