Vue+TS中数组对象元素访问报错，如何实现v-model绑定？

报错原因 #

组件初始化阶段，data是一个空的ref对象，模板渲染（早于onMounted钩子）时尝试访问data['item3'][0].item1，此时data.value.item3尚未被赋值，导致抛出Cannot read properties of undefined (reading '0')错误。可选链data['item3']?.[0]无法直接用于v-model，因为v-model需要一个可写入的响应式引用。

解决方案 #

1. 初始化时赋予默认数据结构 #

提前给data设置符合目标结构的默认值，避免渲染时属性不存在：

// 替换原空对象初始化
const data = ref<{
  sheetname?: string;
  item3?: Array<{
    item1: string;
    item2: Array<{ item3: string }>;
    item3: string;
    item4: string;
    // 其他属性按需定义
  }>
}>({
  item3: [] // 先初始化空数组，后续赋值时会自动覆盖
});

2. 用v-if确保数据存在后再渲染输入框 #

在模板中添加条件判断，只有当item3数组存在且包含元素时，才渲染输入框：

<input
  type="text"
  class="form-control"
  v-if="data['item3']?.[0]"
  v-model="data['item3'][0].item1"
/>

3. 用计算属性封装可写的响应式引用 #

通过计算属性处理空值判断和赋值逻辑，实现安全的v-model绑定：

const item1Value = computed({
  get() {
    // 不存在时返回空字符串作为默认值
    return data.value['item3']?.[0]?.item1 || '';
  },
  set(val) {
    // 自动补全缺失的数组和对象结构
    if (!data.value['item3']) {
      data.value['item3'] = [];
    }
    if (!data.value['item3'][0]) {
      // 按目标结构创建默认对象
      data.value['item3'][0] = {
        item1: '',
        item2: [{ item3: '' }],
        item3: '',
        item4: '',
        item5: '',
        item6: '',
        item7: '',
        item8: '',
        item9: '',
        item10: '',
        item11: ''
      };
    }
    data.value['item3'][0].item1 = val;
  }
});

模板中直接绑定计算属性：

<input
  type="text"
  class="form-control"
  v-model="item1Value"
/>

4. 提前到created钩子初始化数据 #

如果props.modelValue是同步获取的，将数据初始化逻辑从onMounted移到created（created钩子执行早于模板渲染）：

const data = ref<any>({});

created(() => {
  data.value = props.modelValue;
  if (!data.value['sheetname']) {
    data.value = new E507().data;
    data.value.sheetname = props.sheet.templatename;
  }
});

注意：若props.modelValue是异步返回的，此方法无效，仍需结合前两种方案。

内容的提问来源于stack exchange，提问作者peekpik