3

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?

Rakis Friski
  • 551
  • 1
  • 7
  • 26
  • 2
    You can make attributes dynamic with `:`. [How to add dynamically attribute in VueJs](https://stackoverflow.com/questions/39247411/how-to-add-dynamically-attribute-in-vuejs) – Peter Krebs Jun 03 '22 at 12:10

2 Answers2

5

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>
Lucas
  • 1,833
  • 1
  • 18
  • 19
  • 2
    Thankyou for the answer, it really help me a lot since you give an example for this problem because I'm quite confused as how to search and apply the solution – Rakis Friski Jun 03 '22 at 12:32
4

v-bind

You should be able to make the attributes dynamic. This is done with v-bind: or : for short.

  • true-ish values will add the attribute
  • false-ish values will remove the attribute
  • string/number will show as their attribute value
<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

Peter Krebs
  • 3,831
  • 2
  • 15
  • 29
  • 1
    You're right, I can just use v-bind for this problem, thankyou for the explanation, it really help me, since I'm confused regarding what should I search for this problem – Rakis Friski Jun 03 '22 at 12:31