fjjgpt/src/views/Problem/listquestions.vue

<template>
    <div style="height: 100%;">
        <van-pull-refresh class="inspect-object-question-wrapper" v-model="loading" @refresh="getData()">
            <!-- 使用 v-for 指令遍历 list 数组 -->
            <card01 v-for="item in list" :key="item.id" :title="item.pblmNm + ''" :icon="pblmPasiConvert(item.pblmPasi)"
                :description="renderData(item, item.pblmDesc)" :ellipsisDescription="true"
                @click="jumpPage(`/problem/${item.id}`)" />
        </van-pull-refresh>
    </div>
</template>
<script setup>

import { renderData } from "@/utils/template";
import { jumpPage } from "@/utils/page";
import { getTacQuestionList } from "@/api/questions";
import { onMounted, ref } from "vue";
import card01 from '@/components/card01.vue';
import { pblmPasiConvert } from "@/utils/convert";

// 使用 ref 定义响应式变量 list 和 loading
const list = ref([]);
const loading = ref(false);

// 定义 getData 函数，用于获取数据
function getData() {
    // 设置 loading 为 true，表示正在加载数据
    loading.value = true;
    // 调用 getTacQuestionList 接口获取数据
    getTacQuestionList().then(res => {
        // 将接口返回的数据赋值给 list
        list.value = res.data.list;
        console.log(list.value);
        // 设置 loading 为 false，表示数据加载完成
        loading.value = false;
    })
}

// 在组件挂载后调用 getData 函数获取数据
onMounted(() => {
    getData();
})
</script>

<style lang="scss" scoped>
.inspect-object-wrapper {
    width: 100%;
    height: 100%;
    overflow: auto;
}
</style>