Dynamically binding vuetify layout

0
votes

I'm trying to dynamically bind the layout of one part of my component. I'm just not seeing an exact prop to bind to for this.

I tried to use a v-bind hooked to the justify as well as used v-bind:style but am not seeing a direct way to to do this.

<v-layout v-bind="{justify: setLayout(isPdfLoaded)}" style="margin-top: 5.5%">


setLayout(bool: boolean): string{
  if(bool === true){
    return 'justify-start'
  } else {
    return 'justify-center'
  }
},
2
layoutvuetify.js

2 Answers

0
votes
<v-layout :justify-center="!isPdfLoaded" :justify-start="isPdfLoaded" style="margin-top: 5.5%">

ended up going with this and it works.

0
votes

Using a ternary operator also works

<v-layout :class="isPdfLoaded ? 'justify-start' : 'justify-center'" style="margin-top: 5.5%">