Utilize a checkbox located within a table to obtain or delete the ID with the help of

Greetings everyone,

I am currently working on creating a table with checkboxes. The goal is to add the ID to an array of objects when the checkbox is clicked and remove it when unchecked.

Here is a snippet of my code:

HTML Table

...
<td><input type="checkbox" @click="checkThis(id)" /></td>
...

Vue.js Code Sample

import _ from 'lodash'

export default {
    data(){
        return{
            myArray: []
        }
    },
    methods:{
        checkThis(id){
            // Remove object from array
            _.remove(this.myArray, {myArrayId: id})

            // Push new object to array
            this.myArray = [...this.myArray, {
                myArrayId: id
            }]
        }
    }
}

The above code removes the ID if the user unchecks the specific checkbox.

_.remove(this.myArray, {myArrayId: id})

One issue I am facing is that the script doesn't differentiate between which IDs to remove or whether the checkbox is checked or unchecked for a specific ID.

My aim is to add the ID to the array only if the checkbox is checked, and remove it if unchecked.

Any assistance would be greatly appreciated!

Answer №1

Is this the solution you are looking for?

You just need to use checkboxes with v-model

<div id="vue">
<input type="checkbox" v-model="checkbox" :value="1" />
<input type="checkbox" v-model="checkbox" :value="2" />
<input type="checkbox" v-model="checkbox" :value="3" />
{{checkbox}}
</div>


new Vue({
    el:'#vue',
  data:{
    checkbox:[],
  }
})

https://jsfiddle.net/ke5y39cf/

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

Tips for retrieving items from <ng-template>:

When the loader is set to false, I am trying to access an element by ID that is located inside the <ng-template>. In the subscribe function, after the loader changes to false and my content is rendered, I attempt to access the 'gif-html' el ...

Node.js redirection techniques

Node JS is still very new to me and I'm having trouble redirecting buttons to another page. Every time I attempt to redirect, I receive a "cannot GET /(the page that I am trying to redirect to)" error message. The code snippet I'm using for redir ...

Troubleshooting with Vuetify: Exploring methods to adjust the width of individual components within a banner

Seeking to incorporate a search form into a banner, utilizing vuetify. <v-banner app v-model="show" two-line transition="slide-y-transition"> <v-form> <v-text-field label="textfield" /> <v-select :items="select_1" label="sel ...

Adsense displays empty ad banners regardless of their predetermined size

Having trouble with Adsense banners? I have a page with three fixed-size banners (336 x 280) and sometimes they appear blank. It's random - one might work while the others don't, or none may work at all. The code is the same for each banner: < ...

Making sure that the height of the <section> element is equal to the height of the viewport when the page

Is there a way to dynamically adjust the height of a <section> element to match the viewport every time the page is reloaded? Once the height is set, it should remain fixed even if the user resizes the window. For example, if the viewport's hei ...

Fill in the text box based on the selected option from the dropdown menu

My HTML code snippet is as follows: <select name="plot_no" id="plot_no" class="dropdown validate_B"> <option value="">Select number of Plots to book</option> <option value="1">1</option> <opti ...

Transforming a JavaScript component based on classes into a TypeScript component by employing dynamic prop destructuring

My current setup involves a class based component that looks like this class ArInput extends React.Component { render() { const { shadowless, success, error } = this.props; const inputStyles = [ styles.input, !shadowless && s ...

Display a limited number of characters along with a button on the blog tag pages. Clicking on the button will reveal the complete text description

Hey, I am looking to replicate the way WooCommerce tags descriptions are displayed on my WordPress blog. I want it to show only a certain number of characters with a "show all" link, similar to how it appears on this site: I have found some code that work ...

Instructions for adding the more-vert icon from material-ui into a react project

I've been searching tirelessly, but I can't seem to locate it. Where exactly is the location of this in material-ui? I've seen others using it. Any assistance would be greatly appreciated. My initial thought was: import MoreVertIcon from & ...

Certain iFrame instances are unable to display specific cross-domain pages

I'm currently working on a project to create a website that can embed external cross-domain sites, essentially like building a browser within a browser. I've been experimenting with using iFrames for this purpose: While it works for some pages, ...

Drop your friend a line, I'm curious about the Javascript API

As a developer hailing from the Republic of Korea, I am currently in the process of creating websites that are based on Facebook and Twitter. I am interested in utilizing a JavaScript API that allows me to send messages to friends. Initially, I considered ...

The dropdown selection for redirecting to a URL is malfunctioning within a PHP while loop

<?php $sql = "select * from letter where societyn='" . $_SESSION['socityname'] ."' "; $result = mysql_query($sql); $i=1; while($row=mysql_fetch_array($result)){ ?> <?php $id = $row['id']; ...

Retrieving data response post upload with JQuery and an HTML5 Uploader

After uploading an image and receiving a successful post response with the id of the inserted image, how can I insert this response as a data-id attribute within a a tag? Where in the function does this process occur? Here is the function: function img_ ...

The subsequent block within the code is being initiated following the initial block in Node.js

It was expected that "1" would be printed before "2", but the output is incorrect. fs.readdir("./my_stocks", (err, files) => { for(each in files){ var file=files[each]; if(file!='portfolio.js'){ var fn="./my_sto ...

Exploring the integration of PostgreSQL into JavaScript

As a beginner in JavaScript, I am looking to create a web page that can store data in a database. Can anyone provide guidance on what resources or materials I should study to learn more about this process? ...

Enabling CORs headers in Express continues to lead to errors

I have implemented the CORS code provided on http://enable-cors.org/ for express into my index.js file. /*these first five line direct from http://enable-cors.org/.com*/ app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); ...

The browser fails to display the canvas when using the fillRect function

As a novice in Canvas, I've been experimenting with some code, but unfortunately, it's not working for me. Here's the code I used. Can someone help me identify the issue? <!DOCTYPE html> <html> <head> <title> 28 ...

Implement a loader in AngularJS to display when transitioning between pages

Is there a way to implement a loader that appears when the page starts changing and only disappears once the entire page is fully rendered to prevent clipping bugs? I have already set up the loader as shown below: $scope.$on('$routeChangeStart' ...

Install Chakra UI in the latest Next.js project directory

Recently, I decided to incorporate Chakra UI v2.4.9 into my Next.js project running on version v13.1.6. To ensure a seamless integration, I followed the detailed instructions provided in Chakra UI's official guide for Next.js. However, I encountered s ...

Showing a div with 2 unique data attributes - such as displaying Currency and Quantity

My E-Commerce website is created using HTML, JavaScript, and PHP. On the product details page, users can add products to their cart, so I show the total cart value. I need the total amount displayed in a decimal number format (10,2). Currently, when a u ...