CODEWITHSUNDEEP
vue.jsvuetify.js
Question3r
Question3r

Reputation: 3802

assign variables to breakpoints in template

I would like to assign variables to the Vuetify breakpoints. So instead of writing xs12 I would like to keep it dynamic and pass in a component prop.

I tried to assign a variable via xs="myVariable" and :xs="myVariable". Unfortunately both approaches don't work.

So first I will show a working approach how it should be (with hardcoded values)

https://codepen.io/dunnobutmaybelater/pen/MWYjVPV

Next my dynamic approach

https://codepen.io/dunnobutmaybelater/pen/MWYjVqV

Lastly my approach with : before the prop

https://codepen.io/dunnobutmaybelater/pen/povELOd

The code from the codepen is small so I will post it here too:

HTML

<script type="text/x-template" id="app-template">
  <v-app>
    <v-content>
      <v-container fluid fill-height>
        <v-layout align-center justify-center>
          <v-flex xs="xs" sm="sm" md="md" lg="lg" xl="xl">
            <v-card>
              <v-card-text>
                I'm completely centered
              </v-card-text>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</script>

<div id="app"></div>

JS

const App = {
  template: '#app-template',
  data: () => ({
    xs: 12,
    sm: 10,
    md: 8,
    lg: 6,
    xl: 4
  })
}

new Vue({
  vuetify: new Vuetify(),
  render: h => h(App)
}).$mount('#app')

How can I assign those values with dynamic variables?

Upvotes: 0

Views: 428

Answers (1)

Kael Watts-Deuchar
Kael Watts-Deuchar

Reputation: 4481

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 }">

Upvotes: 1

Related Questions