<template> <div> <div v-for="item in state.managelists" :key="item.ID"> <span v-if="!state.editstate">{{ item.siteName }}</span> <a-input type="text" style="width: auto" v-model:value="item.siteName" @input="tempSiteNames[item.ID] = $event.target.value" v-else /> <span v-if="!state.editstate">{{ item.remark }}</span> <a-input v-else type="text" style="width: 100%" v-model:value="item.insertedAt" @input="tempInsertedAts[item.ID] = $event.target.value" /> </div> <a-button v-if="!state.editstate" @click="state.editstate = true">编辑</a-button> <div v-else> <a-button @click="saveChanges">保存</a-button> <a-button @click="cancelChanges">取消</a-button> </div> </div></template><script setup>import { reactive } from 'vue';const state = reactive({ managelists: [ { ID: 1, siteName: 'Site 1', remark: 'Remark 1', insertedAt: '2021-01-01' }, { ID: 2, siteName: 'Site 2', remark: 'Remark 2', insertedAt: '2021-02-01' }, { ID: 3, siteName: 'Site 3', remark: 'Remark 3', insertedAt: '2021-03-01' }, ], editstate: false, tempSiteNames: {}, tempInsertedAts: {},});const saveChanges = () => { state.managelists.forEach((item) => { if (state.tempSiteNames[item.ID]) { item.siteName = state.tempSiteNames[item.ID]; } if (state.tempInsertedAts[item.ID]) { item.insertedAt = state.tempInsertedAts[item.ID]; } }); state.editstate = false; state.tempSiteNames = {}; state.tempInsertedAts = {};};const cancelChanges = () => { state.editstate = false; state.tempSiteNames = {}; state.tempInsertedAts = {};};</script>input框输入就会报错保错TypeError: Cannot set properties of undefined (setting '1')

这个错误可能是因为您在使用双向绑定 `v-model` 时，试图在未定义的对象上设置属性或方法造成的。在这个例子中，您正在使用 `v-model` 绑定 `a-input` 组件的值，并尝试将其设置为 `tempSiteNames` 或 `tempInsertedAts` 对象的属性。

要解决此问题，您需要在 `state` 对象中定义 `tempSiteNames` 和 `tempInsertedAts` 对象的属性。您可以在 `state` 对象中添加以下代码：

tempSiteNames: {},
tempInsertedAts: {},

这将定义 `tempSiteNames` 和 `tempInsertedAts` 对象为空对象，这样当您在 `a-input` 中使用 `v-model` 时，它们将自动创建。

另外，您可能还需要使用 `hasOwnProperty` 方法来检查 `tempSiteNames` 或 `tempInsertedAts` 对象是否已定义属性，例如：

if (state.tempSiteNames.hasOwnProperty(item.ID)) {
  item.siteName = state.tempSiteNames[item.ID];
}
if (state.tempInsertedAts.hasOwnProperty(item.ID)) {
  item.insertedAt = state.tempInsertedAts[item.ID];
}

这将确保您只在 `tempSiteNames` 或 `tempInsertedAts` 对象中定义了属性时才尝试设置 `item` 对象的属性。