Vue3 reactive 操作数组 响应性(数组变了,但页面显示没变)问题
问题代码:
tableTemplates: Array<HkTaskTemplateEntity> = reactive([]);
//删除方法的一部分 ,根据templateId删除数组数据
this.tableTemplates = this.tableTemplates.filter(item => templateId !== item.templateId);
删除后tableTemplates数组中对象减少,但vue页面显示数据条数无变化
原因:
Vue 2 在操作数组的时候，也可以和普通数组这样处理数据的变化，依然能够保持响应性，但在 Vue 3 ，如果使用 reactive 定义数组，则不能这么处理，必须只使用那些不会改变引用地址的操作。
解决方案:
1.将数组包在对象里,如
data=reactive(
{
tableTemplates:[]
});
2.使用ref,但是要注意 js里 使用 .value 操作值
参考文章:
