前端处理数组数据,根据对象的某一项返回其他项。

需要处理的数组如下,我们需要处理成包含问题以及答案的数组。

questionList: [
        {
          content: 'qqqqqqqq',
          imgUrl: '',
          params: [
            {
              answerContent: 'https://tse1-mm.cn.bing.net/th/id/OIP.1IoptREZypVwmCDzulgGGwHaGU?pid=Api&rs=1',
              isImg: 1,
              option: 'A'
            },{
              answerContent: '22222',
              isImg: 0,
              option: 'B'
            },{
              answerContent: '333333',
              isImg: 0,
              option: 'C'
            }
          ],
          rightAnswer: [
            'B'
          ],
          score: 10,
          type: 0
        },
        {
          content: 'wwwwwww',
          imgUrl: '',
          params: [
            {
              answerContent: '33333333',
              isImg: 0,
              option: 'A'
            },{
              answerContent: '44444444',
              isImg: 0,
              option: 'B'
            },{
              answerContent: '55555555',
              isImg: 0,
              option: 'C'
            }
          ],
          rightAnswer: [
            'A'
          ],
          score: 10,
          type: 0
        }]

处理代码

let lise = []
lise = this.questionList.map((ques) => {
        let obj = {}
        obj.content = ques.content
        obj.imgUrl = ques.imgUrl
        obj.answer = ques.rightAnswer.map((item) => {
          let param = ques.params.find((x) => {
            return x.option === item
          })
          return {
            answerContent: param.answerContent,
            isImg: param.isImg,
            option: param.option
          }
        })
        return obj
      })

这个lise就是处理成功的数据。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这个功能可以通过 Vue Router 实现。 首先,在 Vue 目中安装 Vue Router: ``` npm install vue-router --save ``` 然后在 `src/router/index.js` 中定义路由: ```js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', redirect: '/home' // 首页重定向到 /home }, { path: '/home', name: 'Home', component: () => import('@/views/Home.vue') }, { path: '/about', name: 'About', component: () => import('@/views/About.vue') }, // 其他页面 ] const router = new VueRouter({ mode: 'history', // 使用 HTML5 history 模式 base: process.env.BASE_URL, routes }) export default router ``` 其中,我们定义了两个页面:`Home` 和 `About`,其他页面类似。 然后,在 `src/App.vue` 中,我们可以使用 `el-menu` 和 `el-submenu` 组件来实现导航栏和侧边栏的布局: ```html <template> <div class="app"> <el-container> <el-header> <!-- 导航栏 --> <el-menu :default-active="$route.path" mode="horizontal" @select="handleSelect"> <el-menu-item v-for="item in navList" :key="item.path" :index="item.path">{{ item.title }}</el-menu-item> </el-menu> </el-header> <el-container> <el-aside> <!-- 侧边栏 --> <el-menu :default-active="$route.path" :default-openeds="defaultOpeneds" class="el-menu-vertical-demo" @select="handleSelect"> <el-submenu v-for="item in sidebarList" :key="item.title" :index="item.path"> <template slot="title">{{ item.title }}</template> <el-menu-item v-for="subItem in item.children" :key="subItem.path" :index="subItem.path">{{ subItem.title }}</el-menu-item> </el-submenu> </el-menu> </el-aside> <el-main> <!-- 页面内容 --> <router-view></router-view> </el-main> </el-container> </el-container> </div> </template> <script> export default { name: 'App', data() { return { navList: [], // 导航栏数组 sidebarList: [], // 侧边栏数组 defaultOpeneds: [] // 默认展开的侧边栏 } }, created() { // 向后端请求导航栏和侧边栏的数据,并设置到对应的数组中 // ... }, methods: { handleSelect(index) { // 点击导航栏或侧边栏时,跳转到对应的路由 this.$router.push(index) } } } </script> ``` 在 `data` 中定义了三个变量:`navList`、`sidebarList` 和 `defaultOpeneds`。 其中,`navList` 存储了导航栏的数组,`sidebarList` 存储了侧边栏的数组,`defaultOpeneds` 存储了默认展开的侧边栏。 在 `created` 钩子函数中,我们可以向后端请求导航栏和侧边栏的数据,并将数据设置到对应的数组中。 在 `handleSelect` 方法中,我们可以通过 `this.$router.push(index)` 实现路由跳转,其中 `index` 为路由的路径。 最后,在每个页面中,我们可以使用 `el-breadcrumb` 组件来实现面包屑导航: ```html <template> <div> <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/about' }">关于我们</el-breadcrumb-item> <!-- 其他面包屑导航 --> </el-breadcrumb> <!-- 页面内容 --> </div> </template> ``` 其中,`:to` 属性绑定的是一个对象,该对象的 `path` 属性为路由的路径。 这样,我们就实现了点击顶部导航栏,定位到对应侧边栏,点击侧边栏的某一项,显示对应的页面内容的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值