Home » vue » Vue.js: How to read $index inside computed function?

Vue.js: How to read $index inside computed function?

Posted by: admin November 26, 2021 Leave a comment

Questions:

I have list of links:

  <ul id="menu">
     <li v-for="item in items">
       <a href v-bind:href=link>{{item.message}}</a>
     </li>
  </ul>


  var example1 = new Vue({
  el: '#menu',
  data: {
     items: [
        { message: 'Link1' },
        { message: 'Link2' }
     ]
  },
  computed: { 
      link: function() {
          return f($index)    // how do I access current array index ??
      }
  }
  })

I can achieve the desired result by using mustache markup in a href attribute but it must be possible to access this $index variable from within a computed function?

Answers:

You can’t.

This is what methods are for:

<a href v-bind:href="link($index)">{{item.message}}</a>

methods: { 
  link: function(index) {
    return f(index)
  }
}