How can I extract the values from multiple sets of Quasar toggle buttons within a Vue.js application?

We have implemented the Quasar framework in our Vue.js application. In one of our modal dialogues, we have multiple groups of toggle buttons (q-btn-toggle) for each master service provider. The screenshot of the setup can be viewed here: https://i.sstatic.net/MYOl9.png

The goal is to allow clients to select both percentage-based and fixed amount tips for services provided by different masters. However, the current code only allows selecting a single button that applies to all masters. This limitation prevents the ability to set different tip amounts for each individual master.

Here's an excerpt from the existing code:

<template>
  <q-dialog v-model="show" no-backdrop-dismiss full-width>
    <q-card>
      //...omitted for brevity

I am seeking guidance on how to modify the code to achieve this functionality. Any suggestions would be greatly appreciated!

javascriptvue.jsquasar-framework

Answer №1

It might be beneficial to consider turning togglePercentPayment and toggleStandardPayment into arrays. Given that you are dealing with multiple variables for all masters, it is logical that they would be interdependent.

You could define them as arrays, like this for the data property:

data: function() {
    return {
      show: false,
      togglePercentPayment: [null, null],
      toggleStandardPayment: [null, null],
      percentPayments,
      standardPayments,
    }
},

And in the template section:

<q-card v-for="({ master }, index) in items" :key="master.id">
    <div class="row">
        <div class="col-2 flex justify-center items-center">
                <Avatar
                  :src="master.employer_avatar"
                  :size="50"
                  no-default-spinner
                />
              </div>
              <div class="col">
                <q-card-section>
                  <q-btn-toggle
                    v-model="togglePercentPayment[index]"
                    toggle-color="primary"
                    :options="percentPayments"
                    spread
                    @input="getFullTip"
                  />
                </q-card-section>
                <q-card-section>
                  <q-btn-toggle
                    v-model="toggleStandardPayment[index]"
                    toggle-color="primary"
                    :options="standardPayments"
                    spread
                    @input="getFullTip"
                  />
            </q-card-section>
        </div>
   </div>
</q-card>

Furthermore, if the number of masters is not fixed at 2, you can dynamically construct the array based on the length of masters. For example:

data: function() {
    return {
      show: false,
      togglePercentPayment: new Array(this.items.length).fill(null),
      toggleStandardPayment: new Array(this.items.length).fill(null),
      percentPayments,
      standardPayments,
    }
},

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

Unable to render properly after saving to Firebase

Currently, I am working on developing an express app that creates a Google map using geo coordinates extracted from photos. My goal is to utilize Firebase for storing data related to the images. While my code is functioning properly, I encountered an issue ...

javascriptnode.jsexpressfirebasestormpath

Tips for maintaining a sticky navbar within a specified body width

When I scroll, my sticky navbar transitions from being as wide as the body (maximum 1450px) to spanning the full screen width. Check it out at . I've set the body width with CSS: body { max-width: 1450px; } Currently, the sticky navbar ...

javascripthtmlbootstrap-4navbar

Utilizing custom validity for asynchronous validation of forms

I am implementing a feature where users can only submit the form if the user does not already exist. To achieve this, I have created a custom rest API to check if the entered user already exists either on input blur or form submission. This approach has be ...

javascriptajaxformsvalidation

Utilizing Vue.js and Vuetify for Server-Side Form Validation

While there is ample documentation available for client-side validation with Vuetify, I am struggling to find resources for server-side validation messages specifically tailored for Vuetify and Vue. ISSUE Here is the current component setup: <templat ...

vue.jsvuetify.js

The W3C validator verifies the cached iteration of the website

Click here The most recent error is on Line 420, Column 42: Found a stray start tag script. <script src="/skin/sayan_health/js/nc.js"></script> However, I managed to fix this error by placing the script tag inside the body tag. When I inspec ...

javascripthtml

Is it possible to access the Zustand store from outside a functional component?

Within my util.ts file, I have defined a function that can be utilized in various places. This function accesses both a variable and a function from the Zustand store. import useStore from "@/store/useStore"; const { roomState, setRoomState } = ...

javascriptreactjsreduxnext.jszustand

Loading complex models with Three.js

Whenever I attempt to load a significantly large file utilizing the appropriate loaders provided by the library, the tab in which my website is running crashes. Despite trying to implement the Worker class, it doesn't seem to resolve the issue. Here i ...

javascript3dthree.js

The system is unable to interpret the symbol property 'Symbol(Symbol.iterator)' because it is not defined

I have created a custom .any() method for Array objects to loop through an array and check if any item passes a specified function: Array.prototype.any = (comparator) => { for(let item of this){ if(comparator(item)){ return true ...

javascriptarraysnode.jsmongoose

Using Jquery and Ajax to Process JSON Data

Currently experimenting with the API. This API generates random user data in JSON format, but I'm facing difficulties in parsing the response. Every time I try, I end up receiving undefined objects. Below is the code snippet that I am using: <sc ...

javascriptjqueryajaxjson

What is the best way to initially conceal content and then reveal it only after an ajax call is made?

Currently, I have a situation where content is revealed after the callback function of a .js library (typed.js) executes. Here is the script I am using: Javascript $(function(){ $("#logo-black").typed({ strings: ["Nothing^450&Co^250.^500" ...

javascriptjqueryhtmlcssajax

Turn off laptop camera to assess web application functionality in the absence of a camera on the device

In the process of creating an automated testing framework in Java and Selenium, I have encountered a scenario where I need to examine how a web application behaves when accessed by a user with a device lacking a camera. Is there a method to simulate this ...

javascriptjavaselenium

Working with a data variable in a jQuery AJAX operation

I've been attempting to utilize the following code, but it's not functioning as expected: UPDATED WORKING: $(document).ready(function() { $('.infor').click(function () { var datasend = $(this).html(); $.ajax({ ...

javascriptajaxhttp-post

One issue encountered in the AngularJS library is that the default value does not function properly in the select element when the value and

In this AngularJS example, I have created a sample for the select functionality. It is working fine when I set the default value of the select to "$scope.selectedValue = "SureshRaina";". However, when I set it to "$scope.selectedValue = "Arun";", it does n ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-controller

"Create a set of arrays within an object that are duplicates four times, and then dynamically manipulate the first item within each array

Here is the layout of my array object: const foo = {"data":[ [1,'asdf'], [2,'lorem'], [3,'impsum'], [4,'test'], [5,'omg'], ]} I am looking to replicate each array four times and increment the first item ...

javascript

Navigating Angular's Credit Card Input Functionality

I am looking to limit the input capacity to 16 numbers and add a space between each set of 4 numbers. After conducting an extensive search for a credit card input that allows users to enter 16 digits with a " - " or space in between, all results were for ...

javascriptangularcredit-card

Tips for creating a dynamic system to continuously add more HTML tables in PHP

I am working with an HTML table where the data is retrieved from a database. I need to add new rows to enter additional data, but the numbering does not continue from the last number. My question is how can I increase the numbering in the table. Please ref ...

javascriptphpjqueryhtml

Angular JS: techniques for retrieving a single record from a JSON data set

I have a set of JSON data, which is an array consisting of 50 objects representing individuals. Each object contains specific parameters like id and lastName. In my controller, I retrieve this data using a resolve called EmployeeResolve and store it in a ...

javascriptjsonangularjsstate

Trouble arises when attempting to correctly implement Vue multiselect

Struggling to create a dropdown with vue-multiselect and encountering an issue. After selecting the initial option, everything works smoothly. However, once I choose another option, the previously selected one disappears as well. Here is the code snippet I ...

vue.jsvue-multiselect

How to update deeply nested subdocuments in Mongoose

I am faced with an issue while attempting to update sub documents using mongoose by utilizing the request.body without explicitly passing the _id of the sub documents. Despite successfully updating, mongoose is deleting the _id from the sub documents. Con ...

javascriptnode.jsmongodbmongoose

JavaScript failing to validate radio button option

There seems to be an issue with the script not properly checking the radio button during testing. <script type="text/javascript"> function checkButton(){ if(document.getElementById('Revise').checked = true){ a ...

javascripthtml