$el is undefined while $ref has a the object in Vuejs 3

Question

I'm trying to get a reference to the element of a textbox but $el is undefined while its $ref has the object.

What am i doing wrong here....I over-simplified my code to bring out the question. Thanks!

    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?!?             
    
        }
    
    });

Estus Flask · Accepted Answer · 2021-10-14 15:52:18Z

5

For components with ref, a ref is component instance, $el property is DOM element.

For elements, which input is, a ref is DOM element itself, it's not supposed to have $el property.

answered Oct 14, 2021 at 15:52

Estus Flask

227k79 gold badges478 silver badges621 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

$el is undefined while $ref has a the object in Vuejs 3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related