I'm sorry for the vague title since I'm confused what should I write in the title regarding this problem,
So, I want to make a component layout using vuetify grid. I know exactly how to make it if I want to achieved it normally such as this:
<template>
<v-flex v-if="totalMenuShowed=== 4" xs12 md6 xl6>
<div>
// some component
</div>
</v-flex>
<v-flex v-else-if="totalMenuShowed=== 3" xs12 md6 xl4>
<div>
// some component
</div>
</v-flex>
<v-flex v-else xs12 md12 xl12>
<div>
// some component
</div>
</v-flex>
</template>
<script>
props: {
totalMenuShowed: {
type: Number,
default: 4,
},
},
</script>
but what I want to know is
"Can I give a condition based on value or props that I have without using v-if and directly modifying xs12, md6, xl4 based on value that I got"
for example such as below, since for the inside component class I can change it as I want using @media screen but I can't change the grid since I used it for another component below and I prefer not to change the grid value myself:
<template>
<v-flex {totalMenuShowed === 4 ? xs12 md6 xl6 : totalMenuShowed=== 3 ? xs12 md6 xl4 : xs12 md12 xl12}>
<div>
// some component
</div>
</v-flex>
</template>
Can someone help me regarding this? I want to know if it is really possible to achieved this in vue?
I would make use of the v-bind and use a computed, like this:
<template>
<v-flex v-bind="vFlexProps">
<div></div>
</v-flex>
</template>
<script>
export default {
props: {
totalMenuShowed: {
type: Number,
default: 4,
},
},
computed: {
vFlexProps() {
return {
xs12: true,
md6: this.totalMenuShowed < 3 || this.totalMenuShowed > 4,
...
};
},
},
};
</script>
You should be able to make the attributes dynamic. This is done with v-bind: or : for short.
<v-flex xs12 :md6="totalMenuShowed>=3 && totalMenuShowed<=4" :md12="totalMenuShowed<3 || totalMenuShowed>4"
:xl6="totalMenuShowed===4" :xl4="totalMenuShowed===3" :xl12="totalMenuShowed<3 || totalMenuShowed>4">
<div>
// some component
</div>
</v-flex>
To make this more maintainable you can create computed values for these conditions if you like.
v-bind documentation: https://vuejs.org/api/built-in-directives.html#v-bind