访问数组中对象的每个元素(vue+ts)

Question

TypeError: Cannot read properties of undefined (reading '0')
at Proxy.render (form1.vue?4692:190:1)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:893:1)

form1.vue?4692:190 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')
at Proxy.render (form1.vue?4692:190:1)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:893:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:5030:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160:1)

发生错误

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

数据到：

item3: [
{
item1: 'SSS',
item2: [{ item3: '2' }],
item3: '',
item4: '2',
item5: '',
item6: '',
item7: '',
item8: '',
item9: '',
item10: '1',
item11: '1',
},
],

vue页面数据到：

const data = ref<any>({});
onMounted(() => {
data.value = props.modelValue;
if (!data.value['sheetname']) {
data.value = new E507().data;
data.value.sheetname = props.sheet.templatename;
}
console.log(data.value);
});

data['item3'][0]不可访问。数据['item3']？。[0]我不能在绑定中做v-model。

有办法访问第0个对象吗？

Answer 1

根据data对象，v-model应该是item3[0].item1而不是data['item3'][0].item1

实时演示：

const vm = {
data() {
return {
item3: [{
item1: 'SSS',
item2: [{
item3: '2'
}],
item3: '',
item4: '2',
item5: '',
item6: '',
item7: '',
item8: '',
item9: '',
item10: '1',
item11: '1',
}]
}
}
}
Vue.createApp(vm).mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.1/vue.global.js"></script>
<div id="app">
<input
type="text"
class="form-control"
v-model="item3[0].item1"
/>
</div>

更新： 当您使用组合API时，上面的答案将不起作用，因为它使用选项API。以下是组合API的修复程序。

由于我们正在更新已安装挂钩中的引用，因此在模板渲染之前不会加载它。因此，在input元素中添加v-if="data.item3"将解决此问题。

演示：

const { ref, onMounted } = Vue;
const vm = {
setup: function () {
let data = ref({});
onMounted(()=>{
data.value = {
item3: [{
item1: 'SSS',
item2: [{
item3: '2'
}],
item3: '',
item4: '2',
item5: '',
item6: '',
item7: '',
item8: '',
item9: '',
item10: '1',
item11: '1'
}]
}
})
return {
data
}    
}
}
Vue.createApp(vm).mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.1/vue.global.js"></script>
<div id="app">
<input
v-if="data.item3"
type="text"
class="form-control"
v-model="data['item3'][0].item1"
/>
</div>