javascript - TypeError this.$refs.password 在 Vue JS 中未定义

Question

我前面有这个错误。我尝试将长度的 errorBucket 用于 v-progress-linear (Vuetify) ( https://vuetifyjs.com/en/components/text-fields/#progress )

模板

                    <v-form
                        ref="form"
                        v-model="valid"
                        lazy-validation
                    >
                    ...
                                <v-text-field
                                    ref="password"
                                    :rules="[rules.required, rules.min, rules.space, nom, prenom, rules.contain]"
                                    counter
                                    loading
                                >
                                    <template v-slot:progress>
                                        <v-progress-linear
                                            v-if="custom"
                                            :value="progress"
                                            :color="color"
                                        ></v-progress-linear>
                                    </template>
                                </v-text-field>
                    </v-form>

脚本

computed: {
        progress () {

            return Math.min(100, (6-this.$refs.password.errorBucket.length) * (100/6))

        },
        color () {

                var couleur = '';

                var errors = this.$refs.password.errorBucket.length;

                if(errors > 2){
                    couleur = 'error'
                }else if(errors == 1 || errors == 2){
                    couleur = 'warning'
                }else{
                    couleur = 'success'
                }    
                
                return couleur;
 
        },
}

打开模态时出错

[Vue warn]: Error in render: "TypeError: this.$refs.password is undefined"
TypeError: this.$refs.password is undefined
[Vue warn]: Error in mounted hook: "TypeError: IntersectionObserver.observe: Argument 1 does not implement interface Element."
TypeError: IntersectionObserver.observe: Argument 1 does not implement interface Element.

如果有人有解决方案，我提前谢谢你。

标签： javascriptvue.js

Answer 1

像这样重构你的计算：

progress() {
  this.$nextTick(() => {
    // your code goes here
  });
}

通过包装您的代码，this.$nextTick您可以确保您的代码在呈现所有内容并且您已完成对refs模板中定义的访问时运行。