CODEWITHSUNDEEP
vue.jsvuetify.js
Eddie Spiller
Eddie Spiller

Reputation: 23

Dynamically change cols in v-col vuetify

I am trying to create a row and column-based on array values. Currently, this is what I have in my component:

<template>
<v-col cols="columnnum">{{value}}</v-col>
</template>

Right now value and columnnum are both props with the detail coming from the parent. I am checking to see if the values come over by adding a console.log during created just to make sure I am getting the data. I cant seem to figure out what I am doing wrong. If this has already been answered my apologies.

Upvotes: 2

Views: 6557

Answers (2)

Mohammad Hosseini Parto
Mohammad Hosseini Parto

Reputation: 741

You can do a simple job. For example, if the variable you sent to the column is a number, you can make it dynamic as follows:

<template>
<v-col :cols="12 / columnnum">{{value}}</v-col>
</template>

Upvotes: 0

chans
chans

Reputation: 5260

You can have dynamic columns based on props, just update the code by adding v-bind:cols or simply :cols

<template>
<v-col :cols="columnnum">{{value}}</v-col>
</template>

For quick explanation, just created a codepen: https://codepen.io/chansv/pen/dyygVWR?&editable=true&editors=101

<div id="app">
  <v-app id="inspire">
    <v-container class="grey lighten-5">
      <v-btn color="primary" @click="dynamicCol == 3 ? dynamicCol = 6 : dynamicCol = 3">cols {{dynamicCol}}</v-btn>
      <v-row>
        <v-col
          :cols="dynamicCol"
          style="border: solid 1px black;"
        >
          sample text
        </v-col>
        <v-col
          style="border: solid 1px black;"
          :cols="dynamicCol"
        >
          sample text
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    dynamicCol: 6,
  }
})

Upvotes: 4

Related Questions