vue 循环遍历list_vuejs怎样遍历显示数组里的值?v-for嵌套循环

该博客讨论了在Vue.js中如何使用v-for循环遍历并显示数组内的值,特别是针对复杂数据结构的嵌套循环。作者遇到一个问题,即在尝试从API获取数据并动态渲染到页面上时,代码未按预期工作。内容包括代码片段,展示如何处理从服务器获取的考试题目数据,以及不同类型的题目数据(如单选、多选、判断等)的过滤和映射。目前,作者遇到了未明确的问题,导致数据无法正确显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

b00e0025fa2a4317a5e67897da36b14a.png

397ea6722290f0ae5c493b46af4bcdce.png

  1. 题目:{{item.question}}

    1. {{item2}}

    答案:{{item.answer}}

赋值代码:

getData() {

console.log("试卷编号是:id==" + localStorage.getItem("examId"));

this.$axios.get("/exam/findExamById", {params: {id: localStorage.getItem("examId")}}).then(response => {

console.log(response.data.result);

if (response.data.result) {

// this.ruleForm = response.data.result;

console.log(typeof this.ruleForm);

var arr = response.data.result.topics;

this.ruleForm.topics = arr.map(item => {

return {

id: item.id,

description: item.description,

question: item.question,

answer: item.answer,

answerList: item.question.split('|||').slice(1),

type: this.typeNameTransformation(item.type),

categories: item.categories,

score: item.score,

time: item.time,

createTime: item.createTime,

};

});

this.ruleForm.total = response.data.result.total;

this.ruleForm.name = response.data.result.name;

this.ruleForm.description = response.data.result.description;

this.ruleForm.personal = response.data.result.personal;

localStorage.setItem("examIsPersonal", this.personal);

this.ruleForm.topics.singleChoiceData = arr.filter(item => {

return item.type === 'SINGLE_CHOICE';

});

this.ruleForm.topics.multipleChoiceData = arr.filter(item => {

return item.type === 'MULTIPLE_CHOICE';

});

this.ruleForm.topics.judgeData = arr.filter(item => {

return item.type === 'JUDGE';

});

this.ruleForm.topics.completionData = arr.filter(item => {

return item.type === 'COMPLETION';

});

this.ruleForm.topics.questionAndAnswerData = arr.filter(item => {

return item.type === 'QUESTION_AND_ANSWER';

});

console.log(this.ruleForm.topics);

console.log(this.ruleForm.topics.singleChoiceData);

// this.allTopicTransformation(this.ruleForm.topics);

this.completionDataTransformation(this.ruleForm.topics.completionData);

// console.log(response.data.result.topics.singleChoiceData);

console.log(this.ruleForm.topics.singleChoiceData);

console.log(typeof this.ruleForm.topics.singleChoiceData);

console.log("等到这个页面的数据多了之后,需要再检查一下分页是否正常!");

} else {

console.log("获取题目信息失败: " + response.data.msg);

}

}).catch(function (error) {

console.log(error);

})

}

},

8473ae8620fcc81ba90442cf0dd2aba2.png

这个代码为什么不生效??????

ad2e3000c1c9a468e9fd38692fab1373.png

数组不是这样取值的吗?

/** * 路由多级嵌套数组处理成一维数组 * @param arr 传入路由菜单数据数组 * @returns 返回处理后的一维路由菜单数组 */ export function formatFlatteningRoutes(arr: any) { if (arr.length <= 0) return false; for (let i = 0; i < arr.length; i++) { if (arr[i].children) { arr = arr.slice(0, i + 1).concat(arr[i].children, arr.slice(i + 1)); } } return arr; } /** * 一维数组处理成多级嵌套数组(只保留二级:也就是二级以上全部处理成只有二级,keep-alive 支持二级缓存) * @description isKeepAlive 处理 `name` ,进行缓存。顶级关闭,全部不缓存 * @link 参考:https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive * @param arr 处理后的一维路由菜单数组 * @returns 返回将一维数组重新处理成 `定义动态路由(dynamicRoutes)` 的格式 */ export function formatTwoStageRoutes(arr: any) { if (arr.length <= 0) return false; const newArr: any = []; const cacheList: Array<string> = []; arr.forEach((v: any) => { if (v.path === '/') { newArr.push({ component: v.component, name: v.name, path: v.path, redirect: v.redirect, meta: v.meta, children: [] }); } else { // 判断是否是动态路由(xx/:id/:name),用于 tagsView 等中使用 // 修复:https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G if (v.path.indexOf('/:') > -1) { v.meta['isDynamic'] = true; v.meta['isDynamicPath'] = v.path; } newArr[0].children.push({ ...v }); // 存 name ,keep-alive 中 include 使用,实现路由的缓存 // 路径:/@/layout/routerView/parent.vue if (newArr[0].meta.isKeepAlive && v.meta.isKeepAlive) { cacheList.push(v.name); const stores = useKeepALiveNames(pinia); stores.setCacheKeepAlive(cacheList); } } }); return newArr; }
03-30
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值