Sorting a Vue.js checkbox in the header of a data table

I'm currently facing an issue with a project I'm handling. The data in question is stored in a v data table, where the header data is retrieved from an external API. Inside this table, there are checkboxes for users to select specific businesses and/or document numbers. The selected data can be printed to a PDF when a document number is chosen.

However, when a user sorts the table by clicking on a header in the v data table, all checkboxes get highlighted but the print PDF button fails to appear. Upon investigating, it seems that the checkboxes are not being sorted along with the rest of the data in the table. I've attempted different solutions like clearing the checkbox data array and adding logic to clear the checkboxes upon header selection, but these did not work.

Below is a snippet of the code used in this project, which was built using Vue and Vuetify 2.6:

    
<v-data-table
dense
:headers="headers"
:page.sync="page"
:items="olpayments"
:search="search"
@click:row="getinfo"
hide-default-footer
:items-per-page="ipp"
>
<template v-slot:top>
<v-row>
<v-btn v-if="olpayments.length>10" :disabled="btndisabled" dense class="mt-1 ml-8" color="success" @click="showall">{{sar}}</v-btn>
<v-divider vertical class="mx-2"></v-divider>
<v-text-field
dense
v-model="search"
label="Search "
class="mx-4"
></v-text-field>
</v-row>
</template>
<template v-slot:item.prikey="{item}">
<v-checkbox
v-model="cb"
class="cbp"
ref="n"
:label="item.prikey.toString()"
:value="item.prikey"
@click.native.stop
></v-checkbox>
</template>
...
</v-data-table>

Answer №1

Your 'cb' property lacks reactivity. Since it is an object, changes to 'cb' or its properties like 'cb.length' will not be reflected in your code or HTML without reactivity. Consider using a 'ref' to address this issue.

...,
cb : ref([]),

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

Utilizing components in next.js

I am attempting to transform the following class <div className={`banner-row marquee ${playMarquee && "animate"}`}> into a format compatible with next.js. I am struggling to find a solution. ...

Building a loading spinner component in a react-native project

I have successfully implemented a loading spinner that is currently being used in various components of my React project. However, as I am now working on a react-native version of the application, I am faced with the challenge of recreating this loading sp ...

`How can the background color be altered based on specific conditions?`

I am attempting to modify the background color. My goal is to change every odd result to a light green (#f0f5f5) to avoid a large white space when the result ends in an even number. I would also like to change the background color of the pagination section ...

The Page is Not Able to Scroll

Occasionally, my app stops allowing scrolling of the entire page length. Everything will be working fine for a while, but then out of nowhere, the page suddenly becomes un-scrollable and you can only interact with the section currently visible on the scree ...

Exploring the depths of AngularJS through manual injection

I seem to have misunderstood the tutorial and am struggling to get manual injection working on my project. As I'm preparing to minify and mangle my JS code, I decided to manually inject all my modules and controllers. However, I keep encountering err ...

Utilize JavaScript to connect WhatsApp with the website

I am looking to use Javascript to enable opening WhatsApp on both iOS and Android devices. Below is the code I have attempted: window.open("https://wa.me/15551234567"); window.open("https://api.whatsapp.com/send?phone=15551234567"); ...

Solving the challenge of handling multiple text inputs in Laravel Blade using Vue.js v-model within a @

Hello, I am encountering an issue with my Laravel application that displays posts and comments. The problem lies with the Vue v-model in the input text when using the @foreach directive in Blade. Each post is showing the comments input box, but when I ente ...

The Ionic AngularJS http service is failing to update the controller

I'm struggling to understand why my controller is receiving an empty array after calling the service, which triggers an http call. Here's how I have set up my app: Here is my app.js file: //App.js .state('myApp.sermonlists', { u ...

What happens when arithmetic operators are applied to infinity values in JavaScript?

Why do Arithmetic Operators Behave Differently with Infinity in JavaScript? console.log(1.7976931348623157E+10308 + 1.7976931348623157E+10308)//Infinity console.log(1.7976931348623157E+10308 * 1.7976931348623157E+10308)//Infinity console.log(1.797693134 ...

Angular - implement file uploading functionality upon file selection (native approach)

How can I implement a feature similar to Gmail's 'attach' button, where clicking on it opens a browse window for the user to select a file, and then sends an http request to the server with the chosen file? Currently, I am using the followi ...

Is it possible for the Chrome mobile camera to take up the full screen size on

Currently, I am using the code below to access the camera and display the stream. The width of the element is 100%, but the height seems to be around 70%. Is there a better way to make it fill the entire screen? HTML <video autoplay class="screen"> ...

Is it possible for a Vue data property to have a value that is determined by another Vue data property object?

Within my HTML form, I have implemented the flatPickr (calendar picker) component which generates an input field. I am currently exploring how to dynamically change the class of the input field if the error class function returns true. Below is the flatPi ...

Ways to retrieve and update the state of a reactjs component

I'm facing an issue with modifying a React JS component attribute using an event handler. export default interface WordInputProps { onWordChange:(word:string) => void firstLetter:string disabled?:boolean } These are the props for my co ...

Adjusting the size of an HTML5 canvas using a class function when a resize event occurs

I'm attempting to adjust the size of a canvas element using a resizeCanvas() method triggered by a resize event. When I directly call the method, the canvas resizes without any issues. However, when the event handler triggers subsequent calls, I encou ...

The function "Jest spyOn" does not exist

I’m currently facing an unfamiliar error while testing my React component using Jest. Here’s the code snippet for my <Row/> component: In my Row component, there are various methods like showDetailsPanel(), handleStatusChange(), handleModalCanc ...

Vue project encountering issue with displayed image being bound

I am facing an issue with a component that is supposed to display an image: <template> <div> <img :src="image" /> </div> </template> <script> export default { name: 'MyComponent', ...

The height of the Material UI Paper component is not appropriately matched with the parent component

I am currently working with the Paper component that contains a Card component, and I am trying to make its height fill the entire screen. To simplify the problem, I have provided the following code: import React from "react"; import { makeStyles ...

The screen is cloaked in a dark veil, rendering it completely inaccessible with no clickable

Utilizing Bootstraps modals, here is my current layout. Within the site's header, there exists a "settings" button that triggers a modal containing various options. These options are not tied to the question at hand. The button responsible for displ ...

Break up a list into separate paragraphs and style each word using individual CSS

I have a user-generated paragraph that consists of a list of words separated by commas, such as "dog, cat, hamster, turtle." I want to be able to individually assign attributes to each word in the list. Check out this image for reference In the example i ...

In my Django html file, I am facing an issue with the IF statement that seems to be dysfunctional

I have a like button and I want it to display an already liked button if the user has already liked the post. Here is my HTML: {% for post in posts %} <div class="border-solid border-2 mr-10 ml-10 mt-3 px-2 pb-4"> & ...