How to Create a Dynamic Grid Using Vue

How to build a dynamic CSS grid with Vue?

You are repeating the grid instead of the content. You need to wrap the content into a <template> or <div>:

new Vue({  el: '#app',  data: {    els1: [],    els2: []  },  mounted() {    // content of the left box    this.els1.push({      first: '9:10',      last: 'Acituf haih bim nizec ziohra uvi utucivsew koukeji fip kene ejviv wiel oj paphewan ilo newut.'    })    this.els1.push({      first: '19:40',      last: 'Macun dahhis cekdiwvug iti fieldu ab rewki pa ruoti abfonon cagoh codsi zadufi pu jurwut urmo owzew cawub.'    })    this.els1.push({      first: '23:18',      last: 'Zerba clegsns dgdrelm cevblrh.'    })    // content of the right box    this.els2.push({      first: '12:17',      last: 'Hevkeek pe niwwat omkodo hapwas fepono azahawop ir bilbuel kame usipe cato icakori rosi sommawo.'    })    this.els2.push({      first: '14:10',      last: 'Hocmaizi weipe low rit todzup evtepcot zesaif unebojmug bageta ri fop sec ibti kukdo caukuocu fugocofo.'    })  }})

.grid {  display: grid;  grid-template-columns: 6ch auto;}
#app {  width: 400px;  display: grid;  grid-template-columns: 1fr 1fr;}
.hour {  text-align: right;  padding: 3px 5px 3px 3px;}
.name {  text-align: left;  padding: 3px 5px 3px 3px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">    <div class="grid">    <template v-for="e1 in els1">      <span class="hour">{{e1.first}}</span> <span class="name">{{e1.last}}</span>    </template>  </div>    <div class="grid" >    <template v-for="e2 in els2">      <span class="hour">{{e2.first}}</span> <span class="name">{{e2.last}}</span>    </template>      </div> </div>

How to populate bootstrap grid dynamically using Vue.js

Use v-for and bootstrap styles:

<template>
  <div class="app">

    <div class="row">
      <div class="col-sm" v-for="item in items">
        {{ item.prop1 }}
      </div>
    </div>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'app2',
  data() {
    return {
      items: []
    }
  },
// Fetch items from database...
}

How to dynamically arrange items in a GridLayout?

Use computed property to calculate the number of rows based on number of items. Then bind the row & col for each Label based on index.

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <ScrollView>
            <GridLayout columns="*,*" :rows="rows">
                <Label v-for="(item, index) in items" :text="item" :key="index"
                    :row="index / 2" :col="index % 2" class="h1"></Label>
            </GridLayout>
        </ScrollView>
    </Page>
</template>

<script>
    export default {
        data() {
            return {
                items: ["A", "B", "C", "D", "E", "F"]
            };
        },
        computed: {
            rows: function() {
                const rows = [];
                for (let i = 0; i < this.items.length / 2; i++) {
                    rows.push("auto");
                }
                return rows.join(",");
            }
        }
    };
</script>

Playground Sample

How to dynamically add components to grid?

Put the components directly inside the components option then create a data property called componentNames which you should loop through it :

import XYZ from '../views/XYZ.vue';
import AAA from '../views/AAA.vue';

export default {
  name: 'Project',
   data:{
      componentNames:['XYZ','AAA']
  },
  components: {
      XYZ,AAA
   
  },
};

in template :

<template>
  <v-container fluid>
    <v-row dense>
      <v-col
        v-for="(comp,n) in componentNames"
        :key="n"
        :cols="n === 1 ? 2 : 10">

          <v-card outlined tile>
             <component :is="comp"></component>
          </v-card>

      </v-col>
    </v-row>
  </v-container>
</template>

---

Related Topics