How to use refs in vue js as querySelectAll

Question

What I need is to change the color of links when scrolling up and down. How can I select Link 1/2/3 by using ref?

<nav class="header-nav">
   <ul>
     <li class="tablet-sm-hide">
       <router-link to="/">Link 1 </router-link>
     </li>
     <li class="tablet-sm-hide">
       <router-link to="/">Link 2  </router-link>
     </li>
     <li class="tablet-sm-hide">
       <router-link to="/">Link 3 </router-link>
     </li>
       </ul>

</nav>

What have you [already tried](https://stackoverflow.com/help/minimal-reproducible-example)? — shaedrich, Mar 28 '22 at 08:39

score 0 · Answer 1 · answered Mar 28 '22 at 08:40

0

You have access to your refs by using this.$refs.

example

const anchors = this.$refs["a"];

console.log(anchors);

answered Mar 28 '22 at 08:40

Maik Lowrey

15,957
6
40
79

score 0 · Accepted Answer · answered Mar 28 '22 at 09:13

Use this method

this.$refs["n1"].$el.style.color = 'red'
this.$refs["n2"].$el.style.color = 'green'
this.$refs["n3"].$el.style.color = 'blue'

<nav class="header-nav">
    <ul>
        <li class="nav">
            <router-link to="/" ref="n1">Link 1 </router-link>
        </li>
        <li class="nav">
            <router-link to="/" ref="n2">Link 2  </router-link>
        </li>
        <li class="nav">
            <router-link to="/" ref="n3">Link 3 </router-link>
        </li>
    </ul>
</nav>

Using a snippet which is not executable is kinda pointless. – shaedrich Mar 29 '22 at 18:20 — shaedrich, Mar 29 '22 at 18:20

How to use refs in vue js as querySelectAll

2 Answers2