Vuetify: v-container fluid="false" not working

[canhkieu]

I try to test v-container full-width or center by set fluid="false" but not working. How to do it?

<v-app>
  <v-navigation-drawer></v-navigation-drawer>
  <v-toolbar></v-toolbar>
  <main>
    <v-container fluid="isFullWidth">
      <router-view></router-view>
    </v-container>
  </main>
  <v-footer></v-footer>
</v-app>

<script>
  export default {
    data () {
      return {
        isFullWidth: false,       
      }
    }
  }
</script>

[jacekkarczmarczyk]

:fluid="false"

[canhkieu]

Not work. It's alway display full width

[cawa-93]

Seems that the attribute does not take values, but simply passes all the attributes to classes
https://github.com/vuetifyjs/vuetify/blob/b4742ec9f53c7be140c36b3d4d22a30d2ea0308b/src/components/grid/index.js#L15-L18

[canhkieu]

It's work but so long I think that it's need better solution.

  <v-container ref="container">

                if (width == "FULL_WIDTH") {
                    console.log('FULL WIDTH CONTENT')
                    this.$refs.container.setAttribute("fluid", true)
                    this.$refs.container.setAttribute("class", "pa-0")
                } else {
                    console.log('CENTER CONTENT')
                    this.$refs.container.removeAttribute("fluid")
                }

[cawa-93]

PR https://github.com/vuetifyjs/vuetify/pull/1292

[johnleider]

use <v-container v-bind="{ fluid: isFullWidth } ">

[canhkieu]

Thanks @johnleider , I tried, but It's not work. Did you test it?

[cawa-93]

https://codepen.io/cawa-93/pen/zdzqrV?editors=1010#0

<v-container :class="{fluid: isFullWidth}">

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord