Apologies for the unclear title, as I am unsure of what to name it with regards to my current issue,
I am attempting to create a component layout using vuetify grid. I have a clear idea of how to do this conventionally, like so:
<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>
However, my question is
"Is it possible to set conditions based on values or props without using v-if and directly adjusting xs12, md6, xl4 according to the value received?"
For instance, can I do something like the following, where I can modify the inner component's class as needed using @media screen, but cannot change the grid since it is used for other components below and I would prefer not to manually adjust the grid values:
<template>
<v-flex {totalMenuShowed === 4 ? xs12 md6 xl6 : totalMenuShowed === 3 ? xs12 md6 xl4 : xs12 md12 xl12}>
<div>
// some component
</div>
</v-flex>
</template>
Could someone assist me with this? I am curious to know if achieving this in Vue is indeed feasible.