对数组对象的控制逻辑显示全部模块的内容

Question

有一个对象数组，内容分几个模块，另外有一个全部的模块显示所有子模块的内容。

数据格式：

 cardData: [
        {
          title: "基础数据",
          content: [
            {
              text: "人员组织",
              dec: "对学生提交的申请进行管理",
              icon: require("../../assets/cardicon/ryzz.png"),
            },
            {
              text: "学期管理",
              dec: "对学生提交的申请进行管理",
              icon: require("../../assets/cardicon/xqgl.png"),
            },
          ],
        },
        {
          title: "卡片管理",
          content: [
            {
              text: "人员信息登记",
              dec: "对学生提交的申请进行管理",
              icon: require("../../assets/cardicon/ryxxdj.png"),
            },
          ],
        },
      ],

渲染语句

          <div v-for="(item2, index2) in cardData" :key="index2">
            <div v-if="item2.title == item.text" class="card-content">
              <div
                class="card"
                v-for="(item3, index3) in item2.content"
                :key="index3"
              >
                <img :src="item3.icon" alt="" />
                <div class="content">
                  <h2>{{ item3.text }}</h2>
                  <h3>{{ item3.dec }}</h3>
                </div>
              </div>
            </div>
          </div>

现在应该怎样在渲染语句里面控制全部展示的逻辑？上面写的只能把对应模块的展示出来。

Answer 1

写个计算属性，然后页面上cardData改成使用计算属性这个变量

computed: {
    allCardData () {
        let all = {
            title: '全部',
            content: []
        }
        this.cardData.forEach(i => {
            all.content.push(...i.content)
        })
        return [all, ...this.cardData]
    }
},

页面上

<div v-for="(item2, index2) in allCardData" :key="index2">