vue數組進行分組

數組進行分組使用switch方法 

<template>
  <v-layout>
    <v-card contextual-style="dark" v-if="show">
      <span slot="header">
        一級主頁面
      </span>
      <div slot="body">主內容頁
        <!-- <div v-for="item in listTittle" :key="item.id">{{item}}</div>         -->
        <!-- <div v-for="item in list" :key="item.id">
            <p>{{listTittle}}{{item.name }}</p>
          </div> -->
        <div>
          <ul>
            <li>需求：{{lists.demand}}</li>
            <li>用戶：{{lists.user}}</li>
            <li>時間：{{lists.time}}</li>
          </ul>
        </div>
      </div>
      <div slot="footer" :showDate="showDate">
        <div>來自主頁面</div>
        <button type="button" class="btn btn-info " @click="toggle1">去子組件並傳遞數據</button>
      </div>

    </v-card>
    <v-card contextual-style="dark" v-else>
      <span slot="header">
        組件主頁
      </span>
      <div slot="body">組件內容頁</div>
      <div slot="footer">
        <div>來自組件頁面</div>
        <my-button showDate="***父組件傳遞的數據***" @toggleEvent="toggle"></my-button>
      </div>

    </v-card>

  </v-layout>
</template>

<script>
/* ============
 * Home Index Page
 * ============
 *
 * The home index page.
 */

import VLayout from '@/layouts/Default';
import VCard from '@/components/Card';
import MyButton from '@/components/MyButton';

export default {
  /**
   * The name of the page.
   */
  name: 'home-index',
  data() {
    return {
      show: true,
      showDate: "父子間傳過來的數據",
      lists: {
        demand: [],
        user: [],
        time: []
      },
      list: [{ id: 1, name: '需求1', code: 'admin.demand' },
      { id: 2, name: '需求2', code: 'admin.demand' },
      { id: 3, name: '用戶1', code: 'admin.user' },
      { id: 4, name: '用戶2', code: 'admin.user' },
      { id: 5, name: '時間1', code: 'admin.time' },
      { id: 6, name: '時間2', code: 'admin.time' },
      { id: 7, name: '用戶3', code: 'admin.user' },]
    }
  },
  methods: {
    toggle1() {
      this.show = false;
    },
    toggle(data) {
      console.log(data)
      this.show = data;
    },
    listinfo() {

      this.list.map((x) => {
        console.log(x.code.split(".")[1])
        switch (x.code.split(".")[1]) {
          case "demand":
            this.lists.demand.push(x.name);
            // 執行代碼塊 1
            break;
          case "user":
            // 執行代碼塊 2
            this.lists.user.push(x.name);
            break;
          case "time":
            // 執行代碼塊 3
            this.lists.time.push(x.name);
            break;
          default:

        }
      })
    }
  },
  mounted() {
    // this.toggle();
    this.listinfo();
  },
  /**
   * The components that the page can use.
   */
  components: {
    VLayout,
    VCard,
    MyButton
  },
};
</script>