TypeError this.$refs.password 在 Vue JS 中未定义答案

【问题标题】：TypeError this.$refs.password is undefined in Vue JSTypeError this.$refs.password 在 Vue JS 中未定义
【发布时间】：2021-03-26 03:07:17
【问题描述】：

我前面有这个错误。我尝试将长度的 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.

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

【问题讨论】：

您在哪里将password 定义为ref？
@hamidniakan 我更新我的帖子
stackoverflow.com/a/53556796/6178832
$refs 不是响应式的，不应在计算中使用。即使你绕过了 TypeError，你的函数也不会工作
@SølveTornøe 你知道如何从规则中获取错误数量吗？

标签： javascript vue.js

【解决方案1】：

像这样重构你的计算：

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

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

【讨论】：