在Vue3 中使用Arco Design中的列表List进行数据展示,如如图中的 dataSource响应不到数据,在前端显示暂无数据。
js的代码如下,这是什么问题?
import { reactive, ref, inject} from "vue";
export default {
setup() {
var dataSource = reactive([]);
var moviesCount = ref(0);
var names = reactive([]);
var imageSrc = reactive([]);
var description = reactive([]);
const flag = ref(false);
const $axios = inject("$axios");
// 搜索电影
const searchMovie = () => {
names = reactive([]);
imageSrc = reactive([]);
description = reactive([]);
$axios({
url: "/movieDetails/selectMovieDetails.do",
method: "post",
async: false,
data: "movieName=" + searchForm.movieName,
}).then((res) => {
var data = res.data.data;
moviesCount.value = data.length;
for (var i = 0; i < data.length; i++) {
names.push(data[i].title);
imageSrc.push(data[i].poster_src);
description.push(data[i].overview);
}
dataSource = new Array(57).fill(null).map((_, index) => {
return {
title: names[index],
description: description[index],
imageSrc: imageSrc[index],
};
});
// 为数据源设置数据
for (var i = 0; i < dataSource.length; i++) {
dataSource[i].imageSrc = data[i].poster_src;
dataSource[i].title = data[i].title;
dataSource[i].description = data[i].overview;
}
setTimeout(() => {
flag.value = true;
}, 1000);
});
};
const searchForm = reactive({
movieName: "",
});
return {
dataSource,
paginationProps: reactive({
defaultPageSize: 3,
total: dataSource.length,
}),
searchForm,
moviesCount,
searchMovie,
flag,
};
},
};
</script>