vue.js - $el 未定义，而 $ref 在 Vuejs 3 中有一个对象

Question

我正在尝试获取对文本框元素的引用，但 $el 未定义，而其 $ref 具有对象。

我在这里做错了什么......我过度简化了我的代码以提出问题。谢谢！

    app.component('lit-entry', {
        template:
            /*html*/
            `
    <div>
    
    {{ message }}
    
    <input v-model="favoriteColor" type="textbox" ref="refColor" />
    
    </div>
    
    `,
        data() {
            return {
               message :"Hey there!",
                favoriteColor:"Blue"
            }
           
        }
        , mounted() {
          
            debugger;
            var x = this.$refs.refColor.$el;  
           //refColor has a value but $el is undefined?!?             
    
        }
    
    });

标签： vue.jsvuejs3

Answer 1

对于带有ref的组件，ref 是组件实例，$elproperty 是 DOM 元素。

对于元素，即inputref 是 DOM 元素本身，它不应该具有$el属性。