vue.js 执行时更改大小值对话框

ggazkfy8  于 2023-03-24  发布在  Vue.js
关注(0)|答案(1)|浏览(139)

我正在尝试创建属性或方法,以更改在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,对不起我的英语不好

0md85ypi

0md85ypi1#

当你尝试v-model="tamanio_dialog"时,假设tamanio_dialog的值为md12,那么它总是这样解析,v-model="md12",它认为md12是一个变量,在你的数据中不可用,这就是为什么它会抛出错误。
因此,使用这些网格类(如xs="12"md="10"md="12")可能会很有用。
child component-

<child-component />
<child-component :md_prop="8" />
<child-component :md_prop="12" />

parent component-

重要提示-v-flex仅在Vuetify 1.x中可用,而您使用的是**Vuetify 2,**因此请改用v-col

x一个一个一个一个x一个一个二个x
下面是一个演示。你应该看到列是根据传递的props创建的。

(因为md类只对整页生效,所以在full_page模式下查看结果。)

一个三个三个一个

相关问题