Vue:Ref

lastmod 2022-03-24created 2020-09-253 edits

Accessing child component instances and elements using the ref attribute and this.$refs.

How to use

Of course, props and events exist, but sometimes you may need to access a child element directly in JavaScript. In this case, you can solve it by assigning a reference ID to the child element using the ref attribute.

For example:

<base-input ref="usernameInput"></base-input>

Now, in the component where you defined the ID using ref, writing the following:

this.$refs.usernameInput

lets you access the <base-input> instance.

Accessing refs in a v-for list

• Stackoverflow - Vue.js ref inside the v-for loop

<list-item
  v-for="item in items" 
  :key="item.id" 
  :value="item.text" 
  ref="items"
/>

And use the refs in your component like this:

this.$refs.items[index]

See also

• vue

Favorite site

• Accessing Child Component Instances & Child Elements