Attempting to retrieve exclusively the checked records in Vue.js

Currently, I am referring to this library for checkboxes. As I delve into the code, I notice how it is declared and utilized.

Initially within the el-table, we have

@selection-change="handleSelectionChange"
. They have initialized an empty array element in the data section like so:

data() {
  retrun {
    multipleSelection: []
  }
}, 
methods:{
  handleSelectionChange(val) {
    this.multipleSelection = val;
  }
}

I am currently trying to filter out only the records of clicked checkboxes. My method looks something like this -

let data = [];
console.log(this.multipleSelection.length);
if (this.multipleSelection.length == 0) {
    data = JSON.parse(JSON.stringify(this.myapidata));
} else {
    data = JSON.parse(JSON.stringify(this.multipleSelection));
}

However, despite my efforts, I am still retrieving all the data instead of just the selected ones. If anyone has encountered a similar issue and can provide guidance, please assist.

Answer №1

By checking the checkboxes, the v-model variable automatically updates itself with the chosen values, showcasing the functionality of two-way binding. To view the selected items, log the multipleSelection within your method:

methods: {
  handleSelectionChange() {
    // This will only display the selected items
    console.log(this.multipleSelection);
  }
}

You will notice that only the chosen items are visible in the multipleSelection array.

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

Having trouble with a single GET request not functioning properly on Safari due to an Authorization issue in Angular 6

I've encountered this issue in several locations, yet haven't found a clear solution. Only one GET request is showing as unauthorized (401), but when I check the debugger, everything seems to be fine and all other requests are functioning properl ...

Error encountered with Angular version 4: Unexpected token export

Upon starting the app with the command ng serve, I encountered an error in the console: VM1018:2297 Uncaught SyntaxError: Unexpected token export at eval (<anonymous>) at webpackJsonp.../../../../script-loader/addScript.js.mod ...

How much does it typically cost to implement external libraries into a project?

Here are some of the most commonly used front-end web development libraries: jquery-min.js (95.9 kB) angular.min.js (108.0 kB) bootstrap.min.css (113.5 kB) bootstrap-theme.min.css (19.8 kB) bootstrap-fonts (185.7 kB) bootstrap.min.js (35.6 kB) All in al ...

Assign a value to a text input using React

Whenever the closeEmail function is triggered or called, I need to set the email.emailAddress as the value of the textfield. I'm fairly new to React, what is the syntax or method to achieve this? Any suggestions? #code snippet <div style={{ disp ...

The specified class is not found in the type 'ILineOptions' for fabricjs

Attempting to incorporate the solution provided in this answer for typescript, , regarding creating a Line. The code snippet from the answer includes the following options: var line = new fabric.Line(points, { strokeWidth: 2, fill: '#999999', ...

Sending data to SOAP API using AngularJS

I've been struggling to send data to a SOAP API but have hit a roadblock. I've attempted various methods but continue to encounter errors when making the API call. The API URL is - and it requires data in XML format like <?xml version="1.0" ...

The overflow hidden function does not seem to be fully functional on the iPad

Struggling to prevent body scrolling when a modal pop-up appears? I've tried setting the body overflow to hidden when opening the modal and resetting it when closing, which worked fine on desktop browsers. However, mobile devices like iPod/iPhone pose ...

How can I temporarily change an image when clicking on it using JavaScript?

I am working on an image section where I want to change the image for a few seconds when clicked and then revert back to the original image. Here is the code I have tried: <img src="contacticons.jpg" usemap="#image-map" id="imgName"> <a onclick ...

What is the clarification regarding accessing JSON from various domains?

(I am aware of the fact that ajax calls must originate from the same domain, and have already gone through relevant responses) However, I am having trouble grasping something: We often see platforms like Facebook use the for(;;) || while(1) pattern in ...

How can I divide a node module bundle file in webpack?

Recently, I developed a Vuejs App for House Plan that includes various optimization techniques. However, I have encountered an issue with two node modules whose sizes exceed 20kb each. As a result, my performance score on Google's Lighthouse test is n ...

Unable to center align a .swf file vertically

I recently added a .swf file to my webpage within a div element, and I attempted to center it vertically in the middle of the div. Unfortunately, my attempts were only successful in horizontal alignment, which is not the desired outcome. I even tried pla ...

After the ajax call has finished loading the page, I would like to toggle a particular div

When I trigger a click event on an element, it calls a function with Ajax calls. How can I toggle a div (which will be loaded after the Ajax call) once the page is loaded? function triggerFunction(){ $("#trigger_div").trigger("click"); $("#to ...

Knockout Observable Array causing UI to freeze and not refresh properly

I recently started using knockout and am exploring the use of observable arrays to track changes from the UI. The initial data is loaded into the array and I'm attempting to dynamically add new objects to the array from another screen. Although I hav ...

The validation process fails when the button is clicked for the second time

When adding a username and email to the userlist, I am able to validate the email on initial page load. However, if I try to enter an invalid email for the second time and click the add button, it does not work. <form id="myform"> <h2>Ad ...

Maintain query parameters in Angular6 while routing with canActivate

When using Auth guard to verify login status and redirecting to the login page if a user is not logged in, there seems to be an issue with losing all query parameters during the redirection process. I attempted to preserve the query params by adding { qu ...

How to apply styles to a child component using CSS modules in a parent component

For the styling of a Material UI component (Paper) within a Menu component, I am referencing this documentation. To style my components using CSS modules with Webpack as the bundler, here's an example: // menu.js import React from 'react'; ...

Maximizing the potential of AngularJS directives while maintaining a seamless connection to the controller

Is there a way to maintain the connection with the current controller when wrapping data with a directive? I am facing an issue where the directive within the wrapped template loses connection with the outside controller, making it impossible to execute f ...

Unexpected Error with Background Position Variable

Hello, I am attempting to create an animated background effect that moves up and down using the .animate() and .hover() methods in jQuery. Within my DOM, there is a div with id="#menu" containing a UL list where each item has a background positioned at dif ...

Encountering a syntax error while utilizing a JavaScript variable in a jQuery selector for a lightbox feature

I'm currently working on creating a lightbox feature and have reached the stage where I am implementing next and previous buttons to navigate through images. I am utilizing console.log to check if the correct href is being retrieved when the next butt ...

Modify the initial letter of the user input as it is entered using JQuery

I've been experimenting with auto-capitalizing the first character that a user inputs in a textarea or input field. My initial approach was as follows: $(document).ready(function() { $('input').on('keydown', function() { if ( ...