javascript - 第一次调用 Nuxt.js 时无法获得某些 $refs

Question

在对话框中创建表单的组件中，第一次显示表单时（即使设置或添加了 SSR），无法通过 $refs（不包含在对象中）获取输入。第一次显示时（无论是使用 SSR 设置还是使用 ），都无法通过 $refs 检索输入（它们不包含在对象中）。

第二次及以后显示对话框时，您将能够获得它们。（当对话框关闭时，您将能够将它们作为 refs 获取。

您不能使用 $emit ，因为您想执行子组件的验证过程并获得返回。我不能使用 $emit 因为我想执行子组件的验证过程并获取返回值。如果我可以通过引用传递父级中的 $emit 参数，我认为它会很好。

源代码

父组件

 <base-dialog-with-close-button
        ref="dialog"
        max-width="900px"
        :title="title"
    >
        <auto-create-inputs
            :validate="validate"
            @validate="v => this.valid = v"
            v-model="data"
            :inputs="inputs"
            ref="inputs" // ← here
        />
        <template v-slot:action>
            <v-row dense justify="center">
                <save-button
                    :form_data="data"
                    url="/api/company"
                    :valid="valid"
                    @validate="$refs.inputs.validate()"
                    @saved="v => saved(v)"
                >Save</save-button>
                <button-grey class="ml-2" @click="hide()">Cancel</button-grey>
            </v-row>
        </template>
    </base-dialog-with-close-button>

子组件

<template>
    <v-form ref="form" v-model="valid" lazy-validation>
        <v-flex>
            <v-row dense >
                <v-col
                    v-for="(input,key) in inputs"
                    :cols="input.col?input.col:'12'"
                    :key="key"
                    class="form_col"
                >
                    <v-row dense justify="start">
                        <v-col>
                            <v-subheader class="form_label">
                                <span class="label">
                                    {{ input.label }}
                                </span>
                                <span v-if="input.required" class="required_label" style="text-align: end">
                                    ※Required
                                </span>
                            </v-subheader>
                        </v-col>
                        <v-col class="input_col">
                            <component
                                :value="getValue(input.value,data)"
                                @input="setValue"
                                :is="getInputComponent(input)"
                                :items="input.items"
                                :prepend-inner-icon="input.prepend_inner_icon"
                                :rules="getRules(input)"
                                :disabled="input.disabled"
                                :clearable="input.clearable"
                                :hint="input.hint"
                                :persistent-hint="input.persistent_hint"
                                :url="input.url"
                                :type="input.val_type"
                                @address="v => setAddr(v,input.addr_col)"
                            />
                            <p class="outer_suffix" v-if="input.outer_suffix">
                                {{ input.outer_suffix }}
                            </p>
                        </v-col>
                    </v-row>
                </v-col>
            </v-row>
        </v-flex>
    </v-form>
</template>

标签： javascriptvue.jsvue-componentnuxt.jsvuetify.js