CODEWITHSUNDEEP
javascriptvue.jsvuejs2
aks
aks

Reputation: 9491

Unable to create ref dynamically in Vue.js

I am rendering a list and then a sublist within that. I want to have a ref to my inner list which will be named something like list-{id}. However, I am not able to achieve this.

Here is the code snippet:

<ul class="scrollable-list" ref="getScrollableRef(company.id)">
  <li v-for="operation in getOperations(company.id)">
    {{company.name}}
  </li>
</ul>

When I inspect the $refs object:

$vm0.$refs
Object {getScrollableRef(company.id): Array(13)}

I think for some reason the value is not being evaluated. Has anyone faced this?

Edit: I am trying to solve this problem https://github.com/egoist/vue-mugen-scroll/issues/14

Upvotes: 2

Views: 1654

Answers (1)

thanksd
thanksd

Reputation: 55644

In your example, you are specifying that the ref should literally be named "getSchoolableRef(componany.id)". That's why the $refs object contains an getScrollableRef(company.id) property with an array of 13 elements as its value.

If you want to use the result of the getSchoolableRef method as the name of the ref, you can use v-bind or the shorthand colon:

<ul class="scrollable-list" :ref="getScrollableRef(company.id)">

As you mentioned, $refs is not reactive and changing the bound value once the component has initialized will not update the property name in $refs. But, you can dynamically set the name of the ref when the component initializes.

Upvotes: 3

Related Questions