Vue js Array findIndex Function

Vue Js FindIndex method : In Vue.js, you can use the pass condition to find the index of an item in an array using the findIndex() method. This method searches through the array and returns the index of the first item that matches the testing function. If no items match, it returns -1.

To use findIndex() with a pass condition in Vue.js, you can pass a function as an argument to findIndex(), which will be used to test each item in the array. The function should return true for the item you’re looking for, and false for all other items.

Once you have the index of the item you’re looking for, you can use it to manipulate the array or display the item in your Vue.js application

Find the first element that is an Even Number in Vue Js

This code is using the Vue.js framework to create an application with a single component. The component has a data property called numbers which is an array of numbers, and a data property called result which will store the result of the function myFunction.

The myFunction method is defined in the methods section of the component, which will be triggered when a button or other element in the application is clicked.

Within the myFunction method, the findIndex method is called on the numbers array with the checkEvenNumber method as a callback function. The findIndex method returns the index of the first element in the array that satisfies the condition in the callback function, which in this case is checking whether the number is even or not.

The checkEvenNumber method is defined within the methods section and takes a number parameter. It checks whether the number is even or not by using the modulo operator, which returns the remainder of a division operation. If the remainder is zero, then the number is even and the method returns true. If the remainder is not zero, then the number is odd and the method returns false.

Overall, this code creates a simple Vue.js application that finds the index of the first even number in an array of numbers.

By passing a condition, the findIndex method in JavaScript can be used to determine an array item’s position.

Vue js Demo: Array.findIndex()

<div id="app" class="container-fluid">
    <P>Numbers : {{numbers}}</P>
     <button @click='myFunction' class='btn btn-primary'>check even number</button>
     <p>{{result}}</p>
  </div>
 <script type="module">
      import { createApp } from 'vue'
      createApp({
      data()
      { 
        return{ 
         numbers : ['33','15','38','69','45','70'],
         result : ''
        } 
     }, 
     methods:{ 
         myFunction(){ 
            this.result = this.numbers.findIndex(this.checkEvenNumber); 
           },
         checkEvenNumber(number){
             return number % 2 == 0;
           
          }
        }
    
    }).mount('#app')
  </script>

Output of Vue Js Array findIndex Method

Find the first element that is an Odd Number in Vue Js

This code defines an object with a method called “myFunction” that uses the “findIndex” method to find the index of the first odd number in an array called “numbers”. The “checkOddNumber” function is used as a callback function to determine if a given number in the array is odd or not. If the number is odd, the “checkOddNumber” function returns true, which causes the “findIndex” method to return the index of that number in the array. The result of the search is stored in a property called “result”

Vue js Demo 2: Array.findIndex()

<div id="app" class="container-fluid">
    <P>Numbers : {{numbers}}</P>
    <button @click='myFunction' class='btn btn-primary'>Check Odd Number</button>
    <p>{{result}}</p>
 </div>
<script type="module">
 import { createApp } from 'vue'
 createApp({
     data()
      { 
        return{ 
         numbers : ['32','51','83','96','54','707'],
         result : ''
        } 
     }, 
     methods:{ 
         myFunction(){ 
            this.result = this.numbers.findIndex(this.checkOddNumber); 
           },
         checkOddNumber(number){
             return number % 2 == 1;
           
          }
        }
    
    }).mount('#app')
  </script>