Increment array by 1 if the item is not already present in the array upon clicking the button

I have data stored in my VueJS component as a list, and it is rendered to the DOM using a v-for loop that iterates through each item in the array. I have a button that removes an item from the array, and now I am working on making the add button add back one item at a time if that item is not already in the array.

  addItem: function(){
for (item in this.array){
  if (item !== item){
    this.array.push(item)
  }else{
    continue
  }
}
},

Answer №1

It appears that your if statement lacks clarity.

Your code does not clearly indicate where the item you wish to add to the array originates from. Perhaps it should be passed as a function argument.

In any case, if you intend to add an item to an array only if it is not already present in the array, you can utilize Array.prototype.includes.

  if (!this.array.includes(item)) this.array.push(item)

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

When using CSS float:left and overflow:visible, the text may get cropped-off at

I'm currently experimenting with creating a color gradient in javascript using numerical values within some of the divs to indicate scale. However, I've run into an issue where as the values get larger, they are cut off due to the float:left prop ...

Guide to sending a POST request from within my application

I'm facing an issue with using $resource for making a post request in my app. Here is the code snippet from my Angular module: angular.module('myApp').factory('Product', ['$resource', function ($resource) { ...

Maintain the visibility of the jQuery dropdown menu even when navigating to a different page within the

I am experiencing an issue with my dropdown menu. Whenever I click on a "dropdown link", it opens another page on my website, but the menu closes in the process. I want to ensure that the menu stays open and highlights the clicked "dropdown link" in bold. ...

How can I retrieve the word that comes after a specific word in discord.js

Currently, I'm attempting to create a bot similar to Dad bot, but I'm struggling with implementing the "Hi __ I'm, Dad" feature. Here's the code snippet that I've put together so far: var imWords = ["i'm", "I&a ...

Having trouble loading images in JavaScript due to an issue with JSON: undefined.jpg not found

I'm struggling to concatenate my image names in this JavaScript code as a newbie, especially since it's pulling from JSON. Any assistance would be greatly appreciated! Below is the JS code snippet I'm working with: function log(msg){ ...

Incorporate an XNA game directly into a website

Is it possible to launch an XNA game directly from a web page without the need for any installations? Something along the lines of Java, Silverlight, or similar to WPF Browser Applications (XBAP). Situation: Visit a webpage, Prompted to install the g ...

Achieving Horizontal Alignment of Tab Labels and Icons in Material-UI with Tabs API

I am currently attempting to customize the Material UI CSS in order to align both the phone icon and text on the same line and closer together. After doing some research, I stumbled upon the Tabs API which seemed promising. Upon further inspection, I disc ...

Exploring the Depths of JSON Arrays within Typescript

I am faced with a challenge in extracting the value of the "id" from the following array of JSON data. The issue lies in the fact that the value is enclosed within double square brackets "[[" which are causing complications in retrieving the desired result ...

Force restart broken socket within Node.js program using Socket.IO programmatically

I have a simple one-to-one client and server Node.js based application. The Node.js is running on Linux (Intel Edison). I am attempting to automatically reboot the Linux server whenever the socket connection is broken. Is this achievable? Below is my unco ...

Using Node.js to efficiently parse JSON data into customizable PUG templates

I have a challenge where I am parsing JSON data into elements called homeCards. To achieve this, I use Axios to request the JSON data and then utilize a for loop to cycle through it. Inside my Axios function, I extract the fields I need and store them in v ...

The Strapi plugin seems to be encountering an issue as the API is not reachable, leading to a

In an attempt to create a custom API in Strapi backend, I developed a plugin called "test" for testing purposes. However, when trying to access the test response in Postman, it displays a 404 error stating that it is not accessible. Let me provide you wit ...

Is it possible to customize the pagination-control labels from numbers (1 2 3) to different values, such as 'Anything1 Anything2 ...', by utilizing ngFor* with an array in ngx-pagination?

Is there a way to customize ngx-pagination's pagination control? Currently, the page numbers are displayed as '1 2 3' but I would like to replace them with specific string values from an array. <pagination-controls (pageChange)=& ...

Parsing error: 'Unexpected token' found in JSON while attempting to access an external file

Currently working on implementing backbone for a new project along with underscore, requirejs, jquery, and bootstrap. Things are progressing smoothly as I aim to include static survey question data into one of the data models. { "defaultOptions": { ...

Find the correct file path for input using JavaScript or Angular 2

How can I retrieve the full file path of a selected Excel file using either pure JavaScript or Angular 2? I am looking to have the user select an Excel file, which will then be sent to a C# WEB API controller for further processing. Currently, my setup is ...

Conditionals in ng-class Syntax

I'm attempting to apply a class conditionally to an element, but I'm struggling with the correct syntax. I've experimented with the code below, but it's not functioning as expected: ng-class="{foo: bar === "true"}" The value of bar i ...

How can I add an emoji picker button to a textbox?

Is there a way to incorporate an emoji picker button within a text box for selecting emojis without using jQuery, only utilizing CSS and core JavaScript? I am looking to implement an emoji picker similar to WhatsApp that allows users to insert emojis dir ...

Launch in a new window using JavaScript

Check out my interactive map here. Currently, when I click on different sections of the map, the target page opens in the same window. However, I would like it to open in a new window instead. <iframe src="http://bluewingholidays.com/map/map.html ...

What is the best way to place an icon in the center of a Bootstrap 5 card image?

I'm looking to center an icon within a bootstrap-5 card image. I have an icon that I want to display at the center of my card image, but I'm unsure how to achieve this using either CSS or Bootstrap-5. Can anyone provide guidance on how to accompl ...

Can the functionality of ngIf and async pipe be replicated within the component's code?

With a form component and a thank you page, I am faced with the challenge of sharing data between these two components using rxjs ReplaySubject. The full code listings can be found here. In my implementation, I am utilizing ngIf and the async pipe to hand ...

Gridview displaying varying border styles in CSS

I'm really struggling with this issue. I have a GridView and I want to ensure that the borders are consistent across all browsers. Right now, I'm experiencing different outcomes in IE, FF, and Chrome. Despite my best efforts with CSS (I'm re ...