Lo siento por el título vago ya que estoy confundido, ¿qué debo escribir en el título con respecto a este problema?
Entonces, quiero hacer un diseño de componentes usando la cuadrícula vuetify . Sé exactamente cómo hacerlo si quiero lograrlo normalmente como este:
<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>pero lo que quiero saber es
" ¿Puedo dar una condición basada en el valor o los accesorios que tengo sin usar v-if y modificando directamente xs12, md6, xl4 según el valor que obtuve ?"
por ejemplo, como a continuación, ya que para la class de componente interior puedo cambiarlo como quiera usando @media screen pero no puedo cambiar la cuadrícula ya que la usé para otro componente a continuación y prefiero no cambiar el valor de la cuadrícula yo mismo:
<template> <v-flex {totalMenuShowed === 4 ? xs12 md6 xl6 : totalMenuShowed=== 3 ? xs12 md6 xl4 : xs12 md12 xl12}> <div> // some component </div> </v-flex> </template>¿Alguien puede ayudarme con respecto a esto? Quiero saber si es realmente posible lograr esto en vue.
Haría uso de v-bind y usaría un computado, como este:
<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> Debería poder hacer que los atributos sean dinámicos. Esto se hace con v-bind: o : para abreviar.
<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> Para hacer esto más fácil de mantener, puede crear valores computed para estas condiciones si lo desea.
Documentación de v-bind : https://vuejs.org/api/built-in-directives.html#v-bind