我正在尝试创建属性或方法,以更改在vuetify中构建的容器对话框的大小。
默认情况下,我需要有它:
<v-flex xs12 md10>
我认为,如果我做一个变量属性,我可以在我的网站的其他部分更改此值。为此,我正在尝试:
<v-flex xs12 v-model="tamanio_dialog">
我在我的组件中添加了一个props:
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},
// HEREDA LOS DATOS DEL USUARIO AUTENTICADO
usuario: {
type: Object
},
tamanio_dialog: ['md10']
},
当我调用我的Dialog时,我会发送这个属性:
:tamanio_dialog="md12"
我可以显示我的容器对话框的大小有这个大小,但控制台日志返回:
Property or method "md12" is not defined on the instance but referenced during render.
更新
在我的父亲组件,总是设置这个大小为xs12
时,应该是md10
在桌面大小,但xs12只在我的对话框。
我尝试使用in fill组件:
tamanio_dialog="md12"
tamanio_dialog="'md12'"
:tamanio_dialog="'md12'"
我更新了 prop 组件:
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},
// HEREDA LOS DATOS DEL USUARIO AUTENTICADO
usuario: {
type: Object
},
tamanio_dialog: {
type:String,
default:'md10'
}
},
更新2
我正在尝试这个,在我希望大小的组件中。
<v-flex xs12 :mdProp="mdProp">
此组件中的props:
mdProp: {
type: Number,
default: 10
}
当我在dialog中调用这个组件时:
:mdProp="12"
结果,始终将大小设置为12和mdprop
flex xs12 mdProp
更新3
vue(我的chill组件)
mdProp: {
type: Number,
default: 10
}
<v-flex :md="mdProp">
PaginaTipo页面,我正在构建对话框:
<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>
结果总是在md12中的webbrowser中,结果类在webbrowser控制台中:
class="flex md"
我做错了什么?谢谢你的readme,对不起我的英语不好
1条答案
按热度按时间0md85ypi1#
当你尝试
v-model="tamanio_dialog"
时,假设tamanio_dialog
的值为md12
,那么它总是这样解析,v-model="md12"
,它认为md12
是一个变量,在你的数据中不可用,这就是为什么它会抛出错误。因此,使用这些网格类(如
xs="12"
、md="10"
或md="12"
)可能会很有用。child component-
parent component-
重要提示-
v-flex
仅在Vuetify 1.x中可用,而您使用的是**Vuetify 2,**因此请改用v-col
。x一个一个一个一个x一个一个二个x
下面是一个演示。你应该看到列是根据传递的props创建的。
(因为
md
类只对整页生效,所以在full_page模式下查看结果。)一个三个三个一个