[Vuejs]-Vue.js render v-container only if fullWidth setting is not true

0👍

As I said, use CSS for showing/hiding content depending on the window width.

However, if you want a JS/Vue solution, then remove the braces, as it says in your console:

[Vue warn]: Error in render: "TypeError: layoutIsFullWidth is not a function"

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    settings: {
      layout: {
        darkTheme: false,
        fullWidth: false
      }
    },
    leftDrawer: {
      activated: true,
      opened: false
    }
  },
  methods: {
    hasLeftDrawer() {
      return this.leftDrawer.activated;
    },
    layoutIsFullWidth() {
      return this.settings.layout.fullWidth;
    },
    layoutIsDarkTheme() {
      return this.settings.layout.darkTheme;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p v-if="!layoutIsFullWidth">{{ message }}</p>
</div>

Also, better use a computed property for this purpose:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    settings: {
      layout: {
        darkTheme: false,
        fullWidth: false
      }
    },
    leftDrawer: {
      activated: true,
      opened: false
    }
  },
  computed: {
    hasLeftDrawer() {
      return this.leftDrawer.activated;
    },
    layoutIsFullWidth() {
      return this.settings.layout.fullWidth;
    },
    layoutIsDarkTheme() {
      return this.settings.layout.darkTheme;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p v-if="!layoutIsFullWidth">{{ message }}</p>
</div>

Leave a comment