Vue Bootstrap Checkbox and <b-table> with <b-form-checkbox> components combine to provide a powerful and flexible user

I am currently implementing b-form-checkbox with b-table to fetch the selected module Ids.

<b-table
    id="module-table"
    :items="list.modules"
    :fields="fields"
    :busy="isBusy">

    <template slot="num" slot-scope="row">
    {{ row.index + 1 }}
    </template>

    <template slot="checkbox" slot-scope="row">
        <b-form-group>
            <b-form-checkbox v-if="!isLoading" v-model="row.item.selected" @change="selection(row.item.moduleId)" variant="outline-secondary" class="mr-1">
            </b-form-checkbox>
        </b-form-group>
    </template>
</b-table>

data: {
  fields: [
    { key: 'checkbox', label: '', class: 'd-none d-lg-table-cell' },
    { key: 'num', label: 'Num', class: 'd-none d-lg-table-cell' },
  ],
  selected: []
}

I have successfully retrieved the selected module Ids, but I am facing difficulty in removing them when toggling the checkboxes. If anyone has any insights on how to determine if a checkbox is selected (true) or not selected (false), your help will be greatly appreciated. Thank you in advance.

 methods: {
     selection(item) {
          if (true)
              app.selected.push(item);
          else
              app.selected = app.selected.map(x => x != item);
     }
 },
javascriptvue.jsbootstrap-vue

Answer №1

The values of the checkboxes are already saved in the list.modules[].selected using the v-model. You can simplify this by creating a computed property to retrieve the selected modules instead of maintaining a separate selected array:

  1. Eliminate the 
    @change="selection(⋯)"
    from the <b-form-checkbox>:
<!--
<b-form-checkbox
  v-model="row.item.selected"
  @change="selection(row.item.moduleId)" // remove
>
-->

<b-form-checkbox
  v-model="row.item.selected"
>
  1. Delete the selection method and the selected data property as they are no longer necessary.
export default {
  data() {
    return {
      // selected: []  // remove
    }
  },
  methods: {
    // selection() {⋯}  // remove
  }
}
  1. Introduce a computed property that filters out the selected modules from list.modules[]:
export default {
  computed: {
    selected() {
      return this.list.modules.filter(module => module.selected)
    },
  },
}

Check out the demo here

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

Jssor's dynamic slider brings a touch of sophistication to preview upcoming images

Incorporating the jssor nearby slider to create a nearly fullscreen display. The goal is to set the opacity of upcoming images to 0.25 when they are not in the main viewport, giving the edges of the upcoming and previous slides a slight transparency. < ...

javascriptjqueryhtmlcssjssor

What methods can be used to identify the presence of a scrollbar in an

Currently, I am facing an issue with my SAPUI5 app. In the app, I have a table that extends beyond the screen. To allow users to navigate back to the top of the table, I have added a button. However, I only want this button to be displayed when the table g ...

javascriptscrollbarsapui5

AngularJS $scope variable can be initialized only once using an HTTP GET request

I'm facing an issue with fetching data from an API in a separate AngularJS application. There's a button that triggers the retrieval of data from the API. Upon clicking, it executes the $scope.getApiData function, which is connected to $scope.pr ...

javascriptangularjshttp

Disabling a chosen option within a dropdown menu

`Hello there, I am just starting out with JavaScript and jQuery. Currently, I am developing a web application for ordering food and drinks. I have a dropdown menu for selecting breakfast items and the quantity. When the "add" button is clicked, a dynamic ...

javascriptjqueryhtml

Performing an Ajax request to submit a form without the need to reload the page in MVC

I am looking for assistance with submitting a form from an MVC view without refreshing the page. However, it seems that my AJAX code below is not functioning properly: //here is ajax call function AjaxCallAndShowMessage(btnClick) { $('form').s ...

javascriptajaxasp.net-mvc

Implementing jQuery in Ionic 3: A Step-by-Step Guide

I am attempting to display an external website within a div element using jQuery in Ionic 3. TS: export class HomePage { constructor(public navCtrl: NavController) { $('#loadExternalURL').load('http://www.google.com'); ...

javascriptjqueryionic3

Custom AngularJS directive: dynamic template rendering using scope value (ng-bind-html)

I am currently working on a directive which looks like this: ... template: function(element, attrs) { var htmlTemplate = '<div class="start-it" ng-if="isVisible">\ <p ng-bind-html="\'{{customDynamicText}}\&a ...

javascriptangularjsdirective

When the canvas is in full screen mode, my div elements are hidden

Currently, I am immersed in a 360-panorama project, utilizing panolens.js and three.js. While Panolens offers fullscreen mode functionality, the problem arises when entering this mode as the canvas conceals all of my div elements. One particular div elemen ...

javascripthtmlcssthree.js

What is the best way to trigger an event in VueJS?

I recently implemented a table using Vuetify in my project. The table is now split into two components - the Table component and the Row component. My challenge is how to handle the same function, this.selected = !this.selected!, when dealing with 2 differ ...

javascriptvue.js

How can I configure Vue 2 using Vue CLI to access and utilize images stored in the src/static directory?

I'm in the process of bundling my Vue CLI application to include src/static/xyz.png so that I can easily reference it as /static/xyz.png. Unfortunately, the documentation provided by Vue doesn't offer clear instructions on how to achieve this. I ...

javascriptvue.jswebpackvuejs2

Ways to exclusively trigger the onclick function of the primary button when dealing with nested buttons in React.js

Let me elaborate on this issue. I have a List component from material-UI, with ListItem set to button=true which makes the entire item act as a button. Within the ListItem, I have added a FontAwesomeIcon. To hide the button, I set its style to visibility: ...

javascripthtmlcssreactjsmaterial-ui

What causes an "Internal Server Error" when attempting to use data for a database request with AJAX GET/POST in Laravel?

There's a unique issue that I'm struggling to resolve... Every time I drag and drop an event into the calendar, an Ajax Post Request is sent to my controller. The controller then inserts some data into the database with the event name received v ...

javascriptphpjqueryajaxlaravel

Increasing numerical values within an array using JavaScript

My goal is to enhance the functionality of this visualization by being able to increase or decrease the nodes in the hidden layers. I have attempted to achieve this by adding the following code: I am facing difficulties in adjusting the number of hidden l ...

javascriptangularjsd3.js

React array fails to update upon modification

Hey there! I've created a component that takes an array of strings, combines them, and then renders a typing animation by wrapping each character in a span tag with toggling opacity from 0 to 1. I noticed an issue when switching the order of displaye ...

javascriptreactjstypescriptnext.js

Having trouble connecting Agora.io with nuxt.js? A common issue may arise in the `created` hook with the error message "ReferenceError: AgoraRTC is not

I am currently working on integrating Agora Web SDK with nuxt.js. After including all the necessary methods, my page now consists of various methods and lifecycle hooks: methods: { // Stream initialization function streamInit(uid, attendee ...

vue.jsvuejs2nuxt.jsagora.ioagora-web-sdk-ng

Is it possible to create an HTML link that prevents users from navigating back to the previous page or displaying the previous link in their browsing history?

I've been tasked with creating a button on a client's website that links to another page, like Google, for the purpose of assisting someone seeking help in case of an emergency. The challenge is finding a way to prevent the user from easily retur ...

javascriptjqueryhtmlcss

What are the best practices for utilizing "async/await" and "promises" in Node.js to achieve synchronous execution?

I'm fairly new to the world of web development and still grappling with concepts like promises and async/await. Currently, I'm working on a project to create a job posting site, but I've hit a roadblock trying to get a specific piece of code ...

javascriptnode.jsasync-awaites6-promise

Guide on how to optimize an ajax call in the browser to prefetch JSON data

One scenario I am dealing with involves initiating multiple ajax calls upon page load. The first call fetches data in JSON format from the server, and subsequent user interactions trigger further ajax requests that require database queries to process the J ...

javascriptjqueryajaxjsonperformance

Protractor never-ending cycle

In my previous question, I encountered an issue with clicking a button until it becomes disabled. Initially, the solution was as follows: var nextPage = function () { if (element(by.css('[ng-click="vm.nextPage()"]')).isEnabled()) { e ...

javascriptangularjsrecursionprotractorinfinite-loop

The Material UI React radio buttons have the ability to modify the value of previous buttons

I'm facing an issue with my Material UI React Stepper Component that contains a group of radio buttons. The problem is that changing the radio button in one step affects the selected value in previous and future steps. I've experimented with diff ...

javascriptreactjsreact-hooksmaterial-ui