原问题:
本来想使用数组中的filter方法,原来用的是
let tableData = ref([])
然后发现Ref上不再filter属性,所以就换成了
let tableData = reactive([])
但是这样有了一个新问题就是:数据加载不出来了,代码如下
// 获取文章列表数据
let tableData = reactive([])
function getArt() {
getArticles().then((response) => {
tableData =response.data.data
})
}
原因:
试图使用 Vue 3 的 Composition API 来获取文章列表数据,并将这些数据更新到一个响应式引用
tableData
中。然而,更新方式tableData = response.data.data
并不是响应式的,因为直接替换了tableData
的引用,而不是更新它内部的数组。这会导致 Vue 无法追踪到tableData
的变化,因此界面上不会更新显示新的数据。
解决方法:
// 获取文章列表数据
let tableData = reactive([])
async function getArt() {
try {
const response = await getArticles(); // 假设 getArticles() 返回一个 Promise
// 更新 tableData 数组的内容,而不是替换它的引用
tableData.splice(0, tableData.length, ...response.data.data);
// 或者使用更简单的方法,如果不需要保留旧数据
tableData = [...response.data.data]; // 但注意,这将不会触发响应性更新,因为你又替换了引用
console.log(response.data.data);
} catch (error) {
console.error('获取文章列表失败:', error);
}
}
标签:data,更新,tableData,reactive,let,vue3,ref,response
From: https://blog.csdn.net/aaaa_aaab/article/details/141680449