I am attempting to create a property or method that can change the size of my container dialog built using Vuetify.
Initially, I need it to look like this:
<v-flex xs12 md10>
I believe that by creating a variable property, I can dynamically change this value in another part of my website. For this purpose, I am trying the following:
<v-flex xs12 v-model="tamanio_dialog">
And I have added a prop in my component:
props: {
formula: { type: Object, required: true },
loading: { type: Boolean, default: false },
tipoLiquidacion: { type: Object, required: true },
tipoLiquidacion_id: { type: Number },
agrupacion_id: { type: Number },
aliasAplicacion: { type: String, required: false},
// INHERITS DATA FROM AUTHENTICATED USER
usuario: {
type: Object
},
tamanio_dialog: ['md10']
},
When I call my Dialog, I am passing this property:
:tamanio_dialog="md12"
Although the size of my container dialog appears to be correct, the console log returns:
Property or method "md12" is not defined on the instance but referenced during render.
UPDATE
In my parent component, the size is always set to xs12 when it should be md10 in desktop size but xs12 only in my dialog.
I have tried the following variations in the child component:
tamanio_dialog="md12"
tamanio_dialog="'md12'"
:tamanio_dialog="'md12'"
I have updated the props component as follows:
props: {
formula: { type: Object, required: true },
loading: { type: Boolean, default: false },
tipoLiquidacion: { type: Object, required: true },
tipoLiquidacion_id: { type: Number },
agrupacion_id: { type: Number },
aliasAplicacion: { type: String, required: false},
// INHERITS DATA FROM AUTHENTICATED USER
usuario: {
type: Object
},
tamanio_dialog: {
type:String,
default:'md10'
}
},
Update 2
I have attempted the following in my component where I expect the desired size:
<v-flex xs12 :mdProp="mdProp">
The props in this component are:
mdProp: {
type: Number,
default: 10
}
When I call this component in the dialog:
:mdProp="12"
The result always sets the size to 12 and mdprop:
flex xs12 mdProp
Update 3
PaginaFormulasForm.vue (my child component)
mdProp: {
type: Number,
default: 10
}
<v-flex :md="mdProp">
PaginaTipo page where I am building the dialog:
<v-card-text>
<PaginaFormulasForm :formula="formulaNuevoProps.formula"
:loading="formulaNuevoProps.loading"
:tipoLiquidacion="tipoLiquidacionById"
:tipoLiquidacion_id="formulaNuevoProps.tipoLiquidacion_id"
:agrupacion_id="formulaNuevoProps.agrupacion_id"
:aliasAplicacion="'nuevoLinea'"
:usuario="usuario"
:mdProp="12"
@guardar="crearFormulaEnLineaLiquidacion"
@cerrar="cerrarDialogoFormula()"
@toggleNuevoFormula="toggleNuevoFormula"
/>
</v-card-text>
The result in the web browser always shows md12 as the class:
class="flex md"
What am I doing wrong? Thank you for reading and sorry for any language errors.