问题遇到的现象和发生背景
使用vue3的Suspense组件问题，是一个TodoList案例，使用Suspense组件进行v-for
用代码块功能插入代码，请勿粘贴截图
父组件template模板部分
<div class="header">
<input class="addInput" v-model="inputVal" @keyup.enter="addThing" />
</div>
<ul class="things">
<Suspense :key="item.thingsId" v-for="item in thingList">
<template #default>
<Items
<!-- 如果这里添加item，那么在异步加载的过程中在输入框输入就会报错,删除了就好了-->
@click="changeItem(item)"
:item1="item"
></Items>
</template>
<template v-slot:fallback>
<div>。。。isLoading</div>
</template>
</Suspense>
</ul>
父组件setup
import { reactive, ref, defineAsyncComponent } from 'vue';
// 异步引入组件
const Items = defineAsyncComponent(
() => import('@/components/SingleItems.vue')
);
// 数据结构
interface thing {
thingsId: number; //事件id
thingsName: string; //事件名称
isDo: boolean; // 是否已做
}
const thingList = reactive<Array<thing>>([]);
const inputVal = ref('');
// 添加数据 回车触发
function addThing() {
if (inputVal.value === '') {
alert('输入为空，添加失败');
return;
} else {
thingList.push({
thingsId: Date.now() + Math.floor(Math.random() * 100),
thingsName: inputVal.value,
isDo: false,
});
inputVal.value = '';
}
}
// click事件
function changeItem(item: thing) {
console.log(item);
}
子组件模板
<div style="overflow: hidden">
<input style="float: left" type="checkbox" :value="item1.isDo" />
<span style="display: block; text-align: center; float: left">{{
item1.thingsName
}}</span>
<button class="niceButton2">删除</button>
</div>
子组件setup
import { defineProps, defineEmits, reactive, toRefs } from 'vue';
interface Props {
item1: {
thingsName: string;
thingsId: number;
isDo: boolean;
};
}
const props = defineProps<Props>();
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
//模拟异步请求
resolve([
{
name: '张三',
age: 15,
},
{
name: '李四',
age: 17,
},
]);
}, 1000);
});
}
await fetchData();
运行结果及报错内容
在等待子组件异步函数时，此时在父组件输入一些值，此时就报错了
