The `indexOf` function cannot be properly executed within a Vue mutation if the action involves a promise

I'm facing a challenge with using indexOf inside a vuex mutation when calling an action that returns a promise. Here is the action code:

export const deleteItem = ({commit}, item) => {
    return new Promise((resolve, reject) => {
        Vue.http.delete(item.url, item)
           .then(response => {
               commit(types.DELETE_ITEM, {response, item})
               resolve(response)
           })
           .catch(error => {
               commit(types.ERROR, error)
               reject(error)
           })
    })
}

Here is the mutation code:

[types.DELETE_ITEM](state, {response, item}) {
   state.notifications = {
            display:    true,
            type:       'success',
            ok:         response.ok,
            status:     response.status,
            statusText: response.statusText,
            body:       response.body
        }
        state.items.splice(state.items.indexOf(item), 1)
    }

I encountered an error saying "indexOf is not a function." Can anyone explain why this might be happening?

Answer №1

It was a mistake on my part when I reassigned the state.items array to an object, causing the indexOf function to vanish from the code.

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

Utilizing the Json data to populate a Kendo grid

I am a bit confused about how to bind the response in my Kendo grid. Currently, I am receiving the response from the service as shown below: My goal is to display the response in the Grid in the format illustrated below: I am utilizing AngularJS, MVC, a ...

What is the best way to input variables into json values? [JavaScript]

let countryCode; let countryName; $(window).on("load", function () { $.ajax({ url: "URL_THAT_RETURNS_JSON" }).done(function (json) { countryCode = json.country_code; $(function () { $.ajax({ url: "URL_THAT_RETURNS_JSON" ...

What is the process for creating an if statement for product activation?

<form method="get" formenctype="text/plain" action="https://app.cryptolens.io/api/key/Activate" > <input type="text" maxlength="23" size="80" name="Key" placeholder="XXXXX-XXXXX-XXXXX-XXXXX" /> <input type="hidden" name="toke ...

What is the best way to navigate to an element on a webpage?

I am currently experiencing an issue with my chat widget where it displays an array of messages when I scroll up. The problem I am facing is that the slider remains fixed at the top when new messages load. I would like it to automatically focus on the la ...

Is it secure to retrieve directory contents with PHP and then read them using JQuery?

Regarding the security of PHP for a specific operation, my query is as follows: I am looking to utilize JavaScript to fetch all JSON files from a designated directory on my web server. The process involves using a PHP script ("get-data.php") to extract th ...

The best practices for managing item spacing in React or React Native

I am facing some challenges while trying to adjust the spacing of my components. My goal is to have the grid occupy 90% of the screen, with the gear icon taking up the remaining 10% <View style={{ paddingLeft: insets.left, padding ...

Decoding SQS POST messages using node.js

I am faced with the challenge of setting up communication between a web server and a worker using an SQS. The process involves uploading an image to an S3 bucket through the server, which then sends a message to the SQS for the worker to retrieve, resize, ...

The circular pattern includes six circles perfectly arranged within the larger circle

Can someone help me achieve perfect circular buttons using Bootstrap, CSS, and HTML5? I've tried my best but need some assistance to make them responsive as well. Here is the code I've been working on: <div class="col-md-12"> ...

React hooks causing the for loop to only work on the second iteration

I am working on a project where I need to implement tags, similar to what you see on this website. Before adding a tag, I want to ensure that it hasn't already been selected by the user. I have set up a for loop to compare the new tag with the existin ...

Cordova's video recorder crashes when using the back phone camera but functions properly with the front camera

I am currently working on a mobile phone project that involves capturing video. I am using Vue.js and Cordova for this project. For the video capturing functionality, I have added the following plugins to Cordova: "cordova-plugin-camera": "^4.1.0", "cordo ...

Fixing TypeError in React App: How to Resolve the "Cannot read property 'prototype' of undefined" Issue

I am completely new to JavaScript and I am struggling to understand the error that keeps popping up. After doing some research, it seems like the error could be due to a poorly written function or something along those lines. Here are the classes involved ...

Exploring Methods to Access External Iframes Using PHP or JavaScript

I need assistance tracking my package that was sent through the local post service. The tracking information can be found at this link: . Using the tracking number RF166699170SK, I should be able to locate the package. However, when I attempt to retrieve ...

I am facing conflicts between vue-tsc and volar due to version discrepancies. How can I resolve this problem?

My vsCode is alerting me about an issue: ❗ The Vue Language Features (Volar) plugin is using version 1.0.9, while the workspace has vue-tsc version 0.39.5. This discrepancy may result in different type checking behavior. vue-tsc: /home/tomas/Desktop/tes ...

Ways to invoke a next.js api that implements next-auth programmatically

In my next.js app, I have integrated next-auth which is set up to allow authentication using Facebook and Google as providers. Additionally, there are some endpoints located in the pages/api folder of the app. These endpoints are accessed from standard ne ...

Tips for successfully installing a package through npm

Looking to set up nest.js Using the guide provided below. https://www.npmjs.com/package/@nestjs/cli Attempted the following command $ npm install -g @nestjs/cli Encountered this error message. bash: /usr/local/bin/npm: No such file or directory Any ...

communicating between domains - js

Background: My latest project involves creating a web application that can download and display housing prices. The data source can be found at The Initial Plan: I aimed to fetch the data directly from the provided link using javascript, and then conver ...

Guide to creating a contenteditable div that automatically generates smart quotes instead of traditional dumb quotes

I've observed that when I write in Google Docs, I get smart quotes. However, when I create contenteditable divs on my own, I only see dumb quotes. Is there a way to make my contenteditable divs display smart quotes instead of dumb quotes? ...

Angular JS: Implementing a click event binding once Angular has completed rendering the HTML DOM

Exploring AngularJS for the first time, I've researched extensively but haven't found a satisfying solution. My goal is to retrieve data from the server and bind it to HTML elements on page load. However, I also need to bind click events to these ...

Upon upgrading to webpack 5.x, I encountered the error message `Error: getaddrinfo ENOTFOUND localhost:8081` when trying to run `npm run serve`. What could be causing

Recently, I was tasked with upgrading a Vue project from webpack 4.x to webpack 5.x. Prior to the upgrade, my vue.config.js file looked like this: devServer: { port: 8081, public: process.env.PUBLIC_ADDRESS, }, The variable PUBLIC_ADDRESS was defined ...

How can I use AJAX to update a DIV when an image is swapped out?

I run an online radio station and I've been looking for a way to display album artwork for each song that plays. After setting up the ability to automatically upload the image of the currently playing song as "artwork.png" to a web server via FTP, I c ...