[Vuejs]-Assign variables to breakpoints in template

1👍

You need dynamic arguments

<v-flex
  :[`xs${xs}`]="true"
  :[`sm${sm}`]="true"
  :[`md${md}`]="true"
  :[`lg${lg}`]="true"
  :[`xl${xl}`]="true"
>

The old components just convert their attributes to classes, so this will work too:

<v-flex :class="['xs' + xs, 'sm' + sm, 'md' + md, 'lg' + lg, 'xl' + xl]">

Or use the new grid components (v-layout/v-flex -> v-row/v-col):

<v-col :cols="xs" :sm="sm" :md="md" :lg="lg" :xl="xl">

or shorthand:

<v-col v-bind="{ cols: xs, sm, md, lg, xl }">

Leave a comment