如何在Vue3 中使用Arco Design中的列表List进行数据展示

Question

在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>

Answer 1

回答不易，求求您采纳点赞哦 感激不尽

看起来可能是你的axios请求没有正确的处理响应的数据，请仔细检查一下你的axios请求以及响应数据的处理。 如果你的axios请求处理正确，那么请检查一下你的dataSource数据是否被正确设置。