$el не определен, в то время как $ref имеет объект в Vuejs 3

#vue.js #vuejs3

Вопрос:

Я пытаюсь получить ссылку на элемент текстового поля, но $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?!?             
    
        }
    
    });
 

Ответ №1:

Для компонентов с ref , ссылка является экземпляром компонента, $el свойство является элементом DOM.

Для элементов, то input есть ссылка-это сам элемент DOM, он не должен обладать $el свойством.