Vue报错：TypeError: Cannot read properties of undefined (reading 'length')

1.报错如下

TypeError: Cannot read properties of undefined (reading 'length')，如下图

image.png

2.错误原因

在报错中，无法准备判断是哪个地方引起的。
排查页面代码后，发现由于在渲染页面时，请求的响应还未返回数据，因此form.payTypeList是undifined，就会出现上述错误

<el-form-item label="支付方式" prop="payTypeList" required>
  <el-checkbox-group v-model="form.payTypeList" class="checkbox">
    <el-checkbox label="1">微信</el-checkbox>
    <el-checkbox label="2">支付宝</el-checkbox>
  </el-checkbox-group>
</el-form-item>

3.解决方案

用v-if判断form.payTypeList是否有数据，有则渲染，没有则不渲染

<el-form-item label="支付方式" prop="payTypeList" required>
  <el-checkbox-group v-if="form.payTypeList"  v-model="form.payTypeList" class="checkbox">
    <el-checkbox label="1">微信</el-checkbox>
    <el-checkbox label="2">支付宝</el-checkbox>
  </el-checkbox-group>
</el-form-item>