Using Vuex and array.findIndex but unable to locate a matching element

I am encountering an issue with the array.findIndex method. Despite being certain that there is a match in the array I am searching through, findIndex consistently returns -1.

let index = state.bag.findIndex((it) => {
    it.id === item.id
    console.log(it.id,it.id===item.id,item.id);
  })
  console.log(index);

When checking the console logs, the following results are displayed:

00SEEB0BASU900XS false 00SEEB0BASU900S index.js:48
00SEEB0BASU900S true 00SEEB0BASU900S index.js:48
00SEEB0BASU900M false 00SEEB0BASU900S index.js:48
00SEEB0BASU900L false 00SEEB0BASU900S index.js:48
00SEEB0BASU900XL false 00SEEB0BASU900S index.js:48
00SEEB0BASU900XXL false 00SEEB0BASU900S index.js:48
-1 index.js:50

The log clearly shows that there is a truthy value present, indicating that the index of the object array should be returned.

Despite trying various solutions, I am still stuck on this problem and would appreciate any assistance.

EDIT:
After adding the RETURN statement, the issue was resolved. However, for learning purposes, I noticed that the MDN example for findIndex did not include a RETURN statement.

const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"];

const index = fruits.findIndex(fruit => fruit === "blueberries");

console.log(index); // 3
console.log(fruits[index]); // blueberries

Answer №2

const searchIndex = currentState.list.indexOf((element) => {
    return element.id === selectedElement.id
})
console.log(searchIndex);
These ECMAScript 6 functions must have a return statement for them to work properly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm having trouble grasping the issue: TypeError: Unable to access the 'subscribe' property of an undefined object

I've been working on a feature that involves fetching data from API calls. However, during testing, I encountered some errors even before setting up any actual test cases: TypeError: Cannot read property 'subscribe' of undefined at DataC ...

What is the best way to retrieve the document DOM object within an EJS template?

I am attempting to display a list of participants when the user clicks on the button. However, every time I try, I encounter an error stating "document is not defined". (Please refrain from suggesting the use of jQuery!). <% var btn = document.getEle ...

Discover the best practices for utilizing the npm commands.test function

Looking to create a function that can return the output from running npm test. (this function can be called as npm.commands.test(packages, callback) here) Attempted to use it in this way: var npm = require("npm"); npm.load('', function(err, np ...

When trying to run the "npm start" command, I encountered a syntax error that specifically mentioned the use of

Every time I attempt to run the npm start command, I encounter the following error: I have followed the steps provided in this link: https://github.com/kriasoft/react-starter-kit/blob/master/docs/getting-started.md Could you please advise on how to resolve ...

ngClass with multiple conditions

I am currently working on implementing the following functionality - I have two pre-set classes that are combined with some component variables successfully. However, I now need to include an additional conditional class. Although the first part is functi ...

In pursuit of increased speed

When using $routeProvider in Angular, I have noticed that every time I navigate to a specific route, I see the following logs in the console: XHR finished loading: "http://localhost:8080/root/partials/view1.html". XHR finished loading: "http://localhost:8 ...

Applying onclick css changes to a specific duplicate div among several others?

Recently, I encountered a situation where I have multiple identical divs on a page. <div class="class" ng-click="example()"></div> With the use of Angular 1.6.4 and jQuery, these divs are styled with background color and border color. Now, w ...

"Jquery's .append function may sometimes display as undefined when

$("#clckjson").click(function() { $(document).ready(function() { $.getJSON("fuelj.json", function(data) { $(data).each(function(i, item) { console.log(item.stationID); var $table = $('<table>'); $table.a ...

Discovering the art of interpreting the triumphant outcome of an Ajax request with jquery/javascript

I recently encountered a challenge with my function that deals with a short JSON string: <script id="local" type="text/javascript"> $( document ).ready(function() { $('tr').on('blur', 'td[contenteditable]', functi ...

What causes Vue to only update once when there are two closely timed mutations to reactive data?

Can you take a look at this simple example? export default { data() { return { name: "Amy", age: 18, }; }, computed: { combinedDataForWatching() { return { name: this.name, age: this.age, ...

Contrast between the act of passing arguments and using apply with arguments

I have an important backbone collection that utilizes a save mixin to perform Bulk save operations (as Backbone does not natively support this feature). // Example usage of Cars collection define([ 'Car', 'BulkSave' ], function(Car ...

The function window.close() does not close the pop-up window when called within the pop-up

I am facing an issue with a Customer Info form that contains an anchor tag "close" meant to close the current window. This customer form is displayed as a pop-up. Within this form, there is also a search button that triggers a pop-up for the search form co ...

Please enter a number to create a new text box in Vue3

I'm looking to implement a feature where I can dynamically add new input boxes. I attempted to follow this example from , but I encountered difficulties. My objective is as follows: When I enter a number in an input box, a new input box should be a ...

Limit the input to numbers when pasting into Angular

Implementing a directive in <input type='text'> to restrict user input to numbers has been successful! The issue arises when a user copies and pastes a string, causing Angular to accept the value and send it to the backend. angular.module ...

Learn how to render list items individually in Vue.js using the 'track-by $index' directive

Recently, I switched from using v-show to display elements in an array one at a time in my Vue instance. In my HTML, I had this line: <li v-for="tweet in tweets" v-show="showing == $index">{{{ tweet }}}</li>". The root Vue instance was set up l ...

Show User-Specific Information Using DataTable

After conducting extensive research, I have been unable to find a suitable example to reference. My goal is to customize my DataTable so that it only displays data relevant to the currently logged-in user (admin accounts will have access to all data). I am ...

What is the proper way to implement ref in typescript?

Currently, I am in the process of learning how to use Vue3 + Typescript. Previously, I have developed Vue2 applications using plain JavaScript. In my current project, I am attempting to define a reactive variable within the setup() function: setup() { ...

Unique title: "Curved Blocks with Unusual Shapes in SVG Path

Hey there, I'm new to working with SVG and Highcharts. I found a jsfiddle online that I would like to customize for my project, but I've encountered an issue with the rounded corner blocks of lines in the Result panel. Here is the link to the js ...

Include a new class in the classList of an element at a specific index

Is it possible to add a class to a specific position in order to maintain a certain order, especially when it goes against the logic that targets the class based on its position? link.closest('item').classList.add('c-class') // Contrad ...

Ways to smoothly conclude a loading animation in real-time

I have a unique challenge of creating a loading animation using Adobe After Effects instead of CSS. The main goal is to develop an animation that continuously loops, but when the loading process stops, it ends with a distinct finishing touch. For instance, ...