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>
Source:stackexchange.com