Unexpected Error in Vue JS: Array IndexOf is not a Function

Every time I've needed to verify if a number exists in an array, I rely on using .indexOf(), but for some reason, it's not working this time around.

Vue method

showSeat(seat) {
    if( !this.selectedSeats.length ) { 
        this.selectedSeats.push(seat)
    } else {
        let index = this.selectedSeats.indexOf(seat)
        ( index >= 0 ) ? this.selectedSeats.splice(index,1) : this.selectedSeats.push(seat)
    }
}

At the start, this.selectedSeats is an empty array, and the first condition executes as expected. However, upon attempting to insert another seat, I encounter 

[Vue warn]: Error in event handler for "showSeat": "TypeError: this.selectedSeats.indexOf(...) is not a function"
. What could be causing this issue?

javascriptarraysvue.jsindexof

Answer №1

In the world of JavaScript, omitting a semicolon can lead to major issues and confusion. Here's an example where two lines are mistakenly interpreted as a single expression:

 let index = this.selectedSeats.indexOf(seat)
 ( index >= 0 ) ? this.selectedSeats.splice(index,1) : this.selectedSeats.push(seat)

Instead of evaluating 

this.selectedSeats.indexOf(seat)(index>=0)
, the proper way is to add a semicolon at the end of indexOf(seat);. This simple addition can prevent headaches down the line.

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

Learn how to call JavaScript code from an HTML file using Ajax

I am encountering an issue with my website. The index.html page contains JavaScript code that triggers an AJAX request to show the content of other.html inside a div in index.html. However, despite the other.html loading correctly, the JavaScript code wit ...

javascriptajax

Warning: Nodemailer has issued a deprecation warning regarding the outdated `punycode` module

Looking to automate daily email sending through a Gmail account, I have been experimenting with nodemailer and crafted this simple test code: const fs = require('fs'); const path = require('path'); const nodemailer = require('nodem ...

javascriptnode.jsgmailnodemailer

Discover the underlying element that is being blurred when clicked

Is there a method to determine which element triggered the blur event when clicked outside? I want to update a ui-select value to match what the user typed in if they click outside of the dropdown. However, if they click on a dropdown item, I want to disc ...

javascripthtmlangularjsui-select

After diligently following every step on OneCheckout and getting no response when placing an order, I decided to upgrade my Magento version from 1.6.1.0 to 1.8

After upgrading the Magento version from 1.6.1.0 to 1.8.0, everything seems to be working smoothly. However, customers are facing an issue during checkout where they can't actually place their order. Despite following all the steps correctly, when t ...

javascriptjquerymagentoe-commerceupgrade

The functionality of Node async/await appears to be malfunctioning

In an effort to streamline my code and reduce the number of callbacks, I decided to explore using async/await. However, I encountered a problem where Express renders the view before the query is complete. The query results are correct, but they come after ...

javascriptnode.jsexpressasync-await

Trouble with console.log and document.addEventListener, they just won't cooperate

I'm currently working on a phonegap application for IOS. I was able to successfully create the project and when running the initial application, everything worked perfectly. However, when I tried to add my own code, it seems that none of the javascrip ...

javascriptjqueryiphonexcodecordova

Is it necessary to clean up the string to ensure it is safe for URLs and filenames?

I am looking for a way to generate a URL-safe filename in JavaScript that matches the one created using PHP. Here is the code snippet I currently have in PHP: <?php $clean_name = strtr($string, 'ŠŽšžŸÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÑÒÓÔÕ ...

javascript

Enable the script tag with the type "module" only under certain conditions

Attempting to dynamically enable script tags in HTML using the code below does not yield the expected results. function loadScript() { document.querySelectorAll('script[type="text/skip-hydration"]').forEach((script) => { script ...

javascripthtml

DB connection in Facebook plugin

I am looking to share my articles on Facebook using a button. Both the article and images are sourced from a database. My dilemma is, "How can I set the link and image for this hyperlink?" I aim to configure the link, picture, and Redirect_uri properties f ...

javascriptasp.netfacebook

Do I need to open Chrome if I want to switch web notifications to Android TWA?

Through the use of TWA technology, we were able to create an Android app that can open a PWA page without displaying an Address bar. Unfortunately, this setup presented a challenge. The absence of the Address bar made it difficult to switch web Push Noti ...

androidvue.jssingle-page-applicationprogressive-web-appstwa

Adjusting the Transparency of the Background in a Pop-Up

I am experiencing an issue with my popup where I want the background to be transparent. However, when I set the opacity in CSS to 0.5 or less, the text also becomes transparent and very dark. How can I achieve a background with 50% opacity while keeping th ...

javascripthtmlcsspopup

detect and handle errors when deploying the Node.js function

I'm currently attempting to use code I found on Github to insert data into a Firestore database, but unfortunately, I keep encountering an error. Here's the specific error message: 21:1 error Expected catch() or return promise/catch-or-re ...

javascriptnode.jsgoogle-cloud-firestore

Is there inconsistency in the behavior of json.parse when given the same input?

This query pertains to the differentiation in outputs resulting from various inputs I am not seeking guidance on achieving a specific output. The reason behind the discrepancy in output between two scenarios, despite using the same argument for the JS ...

javascriptjsonstring

Gulp is failing to convert SCSS files into CSS

I'm having trouble getting gulp to compile my SASS code into CSS automatically. What could be the issue? file structure: public -css --styles.css -index.html sass -styles.scss gulpfile.js package.json Gulpfile: var gulp = require('gulp') ...

javascriptnpmgulp

Adjust the text color of a particular word as you type using the contenteditable property set to "true"

I'm attempting to jazz things up a bit. For instance, I have a div that is set as contenteditable="true". What I want to achieve is changing the color of a specific word I type while writing. In this case, let's say the word "typing" sh ...

javascriptjquery

Different Methods for Establishing XMLHttpRequests

I'm currently diving into the world of AJAX and looking into different methods of creating HttpRequests. So far, I've brainstormed a few approaches: function one() { if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); alert('Oth ...

javascriptajax

What could be the reason for the Express function Router() returning a value of undefined?

Currently, I am working with TypeScript and Express to develop an API that adheres to the principles of Clean Architecture. To organize my application, I have structured each route in separate folders and then imported them all into an index.ts file where ...

javascripttypescriptexpressmoduleundefined

The gem 'remotipart' does not display any server errors in Rails 4

Currently, I have included the 'remotipart' gem in my Gemfile like this: gem 'remotipart' This is defined in my form view new.html.erb <%=form_for @user, remote: true, html: { multipart: true, class: 'user-form' } do |f| ...

javascriptruby-on-railsajaxruby-on-rails-4rubygems

Steps to send a prop value to a Vue.js SCSS file

I am trying to include the props (string) value in my scss file Within my component, I am using the nbColor prop with a value of 'warning'. I want to be able to use this value in my scss file where I have a class called .colorNb {color: color(nb ...

javascriptvue.jsvuejs2vue-componentvuejs3

Could this be a syntax error, or is it a problem stemming from the compiler?

#include <stdio.h> #include <stdlib.h> int main(void) { char name[] = "Alice"; int age = 25; printf("Once upon a time, there was a woman named %s\n", name); printf("She was %d years old\n", age); return 0; } E ...

arrayscprintfdeclaration