find the position of an item within a list

Question

find the position of an item within a list

Is it possible to get the index of an object in JavaScript?

For example:

categories = {
                '1':{code:'HW', name:'Hardware'},
                '2':{code:'SW', name:'Software'},
                '3':{code:'OS', name:'Office Supplies'},
            }

I am trying to get the index of software, but when I use indexOf, I receive an error stating that indexOf is not a function. This is because it's a list of objects. Can this be achieved in any other way?

Here is a sample fiddle for you guys to test: https://jsfiddle.net/50wL7mdz/86966/

Thank you in advance

javascript vue.js

Answer 1

Answer №1

To utilize the index within a v-for loop, you can reference it as (category, index) in categories. Check out this demo on JSFiddle.

new Vue({
  el: '#app',
  data () {
    return {
      categories: {
        '1':{code:'HW', name:'Hardware'},
        '2':{code:'SW', name:'Software'},
        '3':{code:'OS', name:'Office Supplies'},
      }      
    }
  },
  methods:{
    alertIndex(index){
      alert(index);
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
 <ul>
  <li v-for="(category, index) in categories">{{category.code}} - {{category.name}}
  <button @click="alertIndex(index)">Alert Index</button>
  </li>
 </ul>
</div>

Answer 2

To utilize the index within a v-for loop, you can reference it as (category, index) in categories. Check out this demo on JSFiddle.

new Vue({
  el: '#app',
  data () {
    return {
      categories: {
        '1':{code:'HW', name:'Hardware'},
        '2':{code:'SW', name:'Software'},
        '3':{code:'OS', name:'Office Supplies'},
      }      
    }
  },
  methods:{
    alertIndex(index){
      alert(index);
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
 <ul>
  <li v-for="(category, index) in categories">{{category.code}} - {{category.name}}
  <button @click="alertIndex(index)">Alert Index</button>
  </li>
 </ul>
</div>

find the position of an item within a list

Answer №1

Similar questions

What is the best way to retrieve the current state from a different component?

Angular 2 Aot Issue: CRITICAL ERROR: CALL_AND_RETRY_LAST Allocation unsuccessful - JavaScript heap exhausted

Issue with Firebase V9 addDoc: No indication of success or failure, and data is not being written to the

GSAP also brings scale transformations to life through its animation capabilities

An issue with three.js involving sprites, the material of sprites, and detecting mouse clicks

Load texture using ImageUtils with callback in Canvas Renderer

The match() function does not seem to be functioning properly on iOS and Android devices, as it consistently returns a

What is the best way to enhance a React Native component's properties with Flow?

Creating an array of objects through checkbox validation in AngularJS

Tips for ensuring the middle row remains sandwiched between the header and footer rows in Bootstrap

What is the best way to generate a div with a dynamically changing variable as its ID?

Angular js is failing to populate dropdown values

Developing MCRYPT_RIJNDAEL_128 from scratch in Node.js

Issue with Pure Javascript FormData upload involving files and data not successfully processing on PHP end

Is it possible to disable the next and previous buttons in jCarousel?

Determine the selected option in the dropdown menu upon loading the page and when clicked

Calculating the angle formed by three vectors in three-dimensional space

Is the condition failing to evaluate for all td elements?

Sorry, the server cannot be reached at the moment. Please try again later

jQuery DatePicker Not Displaying Calendar