CODEWITHSUNDEEP
vue.jsvuetify.js
Sam Luther
Sam Luther

Reputation: 1190

Vuetify: Dynamically set breakpoint?

I have a slider that i want to use to set the breakpoints on a grid of flex boxes. Adjusting the grid xs1 thru xs12 based on current value the 'columns' data point. I've tried v-bind, that does not work. How would I acheive this?

the slider:

<v-slider
  v-model="columns"
  :label="`Columns : ${columns}`"
  max="12"
  ticks
  ></v-slider>

the flexes:

<v-flex 
  v-for="(val, index) in numberOfRecords" 
  :key="index" 
  v-bind="`xs${columns}`">

the data:

data: () => ({
  numberOfRecords: 40,
  columns: 6,
}),

Upvotes: 1

Views: 1909

Answers (1)

akuiper
akuiper

Reputation: 214987

You need to pass an object to v-bind, which will bind the value of the object to an attribute with the same name as the key:

v-bind="{[`xs${columns}`]: true}"

Upvotes: 3

Related Questions