[Vuejs]-How can I change some of the cards to next line, that are inside an wrapper when screen limit is reached?

by

0👍

✅

Solved my problem by doing an workaround (and i post what i did so it may help anyone who had similar problem as me), and simply ungroup my children. I was using a routes method, that simply was retunirng my $store.state.permission.routes, and doing all the magic on my template. I changed my approach and did all the magic on the routes method, and then simpply passing an object array with my ungrouped components, like this:

      routes() {
        
this.rotas = this.$store.state.permission.routes;
console.log(this.$store.state.permission.routes)

var k=0;



  for(let i in this.rotas){

    if( !this.rotas[i].hidden&&this.rotas[i].children){

      if(this.hasOneShowingChild(this.rotas[i].children,this.rotas[i]) && (!this.onlyOneChild.children||this.onlyOneChild.noShowingChildren) && !this.rotas[i].alwaysShow){
      this.result[k]= this.rotas[i];
      this.result[k].meta=this.rotas[i].children[0].meta;
      k++;
      
    }
    else{
      var childrens =  this.rotas[i].children.filter(item => !item.hidden);

      for(let child in childrens){
        this.result[k]= childrens[child];
        k++;
      
      }
    
    }

  }
  }
  return this.result;
    },

and my template now

<template>
   <div class="menu-wrapper">

   
      <app-link :to="resolvePath(item.path)">
        <!-- single -->
        
        <el-card   :index="resolvePath(item.path)" :class="{'submenu-title-noDropdown':!isNest} ">
          <!-- <item v-if="onlyOneChild.meta" :title="onlyOneChild.meta.title" /> -->          
          <!-- <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" :collapse="collapse" /> -->
          <!-- <span>{{ onlyOneChild.meta.title }}</span> -->
          <div class="contentCard">
            <div class="icon">
          <i :class="item.meta.icon" />
        </div>
          <span class="title">
            {{ generateTitle(item.meta.title) }}
          </span>
        </div>
        </el-card>
    
      </app-link>
    
   
      </div>    

  </template>

Leave a comment