Vue3 萌新遇到的逻辑误区 | 青训营笔记

50 阅读1分钟

刚学vue3 使用vue3上手练习一个项目 遇到的问题是请求接口的时候,返回了两组对象参数。渲染要用到第一组参数的第一个属性和第二组参数。 刚开始写的时候脑袋发懵 一直for循环,以至于写到最后会有九个标题。最后发现思路是错的,最后把第一组参数单独抽出来放到第二组参数里 然后渲染第二组参数 d0ef9ec0c752c1b94ee220600e61cb0.png 7e5089748434d907e51b70ffa5a7b8a.png

import axios from "axios";
import { reactive, ref,computed } from "vue";
let arr1 = reactive([]);
let arr2 = reactive([]);
let number = ref('')
async function aaa() {
  await axios({
    url: "/api/student/exampaper/answer/read/3",
    method: "post",
  }).then((res) => {
    console.log(res);
    arr1.push(...res.data.response.paper.titleItems);
    number = res.data.response.paper.score;
    console.log(number);
    arr2.push(res.data.response.answer)
    console.log(arr2);
      arr1[0].questionItems.forEach((item,index)=>{
      console.log(arr2[0].answerItems[index]);
      item.content = arr2[0].answerItems[index].content;
      item.doRight = arr2[0].answerItems[index].doRight;
      console.log(item);
      console.log(arr1);
    })

7e54b2147314a0e6d48ea22f49176a8.png