Grouping arrays using the switch method
<template> <v-layout> <v-card contextual-style= "Dark" Vif= "Show" > <span slot= "Header" >first-level main page</span> <div slot= "Body" >Main content Page<!--<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> Requirements:{{lists.demand}}</li> <li> User: {{list S.user}}</li> <li> time:{{lists.time}}</li> </ul> </div> </d iv> <div slot= "footer": showdate= "Showdate" > <div> from Main Page </div> <button type= "but Ton "class=" btn btn-info "@click =" Toggle1 "> Go to subcomponents and pass data </button> </div> </v-card> <v-card contextual-style= "Dark" V-Else> <span slot= "Header" >Components Home</span> <div slot= "Body" > Component Content page </div> <div slot= "Footer" > <div> from Component page </di v> <my-button showdate= "* * * data passed by parent component" @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 '; exportdefault { /** * The name of the page. */Name:' Home-index ', data () {return{show:true, Showdate:"Data passed between father and son.", lists: {demand: [], User: [], Time: []}, List: [{ID:1, Name: ' Demand 1 ', Code: ' Admin.demand '}, {ID:2, Name: ' Demand 2 ', code: ' Admin.demand '}, {ID:3, Name: ' User 1 ', Code: ' Admin.user '}, {ID:4, Name: ' User 2 ', code: ' Admin.user '}, {ID:5, Name: ' Time 1 ', Code: ' Admin.time '}, {ID:6, Name: ' Time 2 ', Code: ' Admin.time '}, {ID:7, Name: ' User 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); //executing code block 1 Break; Case"User": //executing code block 2 This. Lists.user.push (X.name); Break; Case"Time": //executing code block 3 This. Lists.time.push (X.name); Break; default: } }) }}, mounted () {//This.toggle (); This. Listinfo (); }, /** The components, the page can use. */Components : {vlayout, VCard, MyButton},};</script>
The Vue array is grouped