Retrieve the value of the target element when the Quasar q-checkbox is checked

I'm currently utilizing QUASAR and encountering an issue where I am unable to retrieve the state of my q-checkbox to determine whether it is checked or not. Despite using event.target.checked and event.target.value, both return as undefined.

Below is the code for my checkbox:

<q-checkbox 
  v-on:click="addServices(full_service, $event)"
  v-model="form.selected_full_services"
  :val="full_service" />

This is the method I am using:

addServices(full_service, event) {
     console.log(event.target.checked)
     console.log(event.target.value)
}

The output in the console is displaying as follows:

output undefined

Answer №1

It seems that you may not need a function at all based on what you've explained:

const { ref } = Vue
const app = Vue.createApp({
  setup () {
    const full_services = ref( ['aaa', 'bbb', 'ccc'] )
    const form = ref( { selected_full_services: [] } )
    return { form, full_services }
  }
})

app.use(Quasar)
app.mount('#q-app')
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1909480928093a1d3cfd0d1cfd0">[email protected]</a>/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
{{form}}
  <div v-for="full_service in full_services">
    <q-checkbox
      :label="full_service"
      v-model="form.selected_full_services"
      :val="full_service" />
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7969286948695a7d5c9d6d7c9d6">[email protected]</a>/dist/quasar.umd.prod.js"></script>

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

Laravel has not been properly initialized

Recently, I've been exploring Laravel 5.3 and vue.js and I'm trying to make a GET request to fetch some user data from my database. I'm utilizing components in this project. Here is a snippet from my app.js file: require('./bootstrap ...

Having trouble receiving responses from pusher when attempting to utilize private channels, without any error notifications being displayed

While utilizing a public channel, I receive the responses without any issue. However, when I switch to a private channel and the channels.php check returns true, I am not receiving any response. According to Pusher's logs, the message is being success ...

Enhancing Efficiency with Laravel 5: Updating Multiple Data Entries

My Simple Todo App lacks the ability to persist multiple record updates simultaneously. The client-side version can be found here: http://codepen.io/anon/pen/bVVpyN Whenever I perform an action, I send an HTTP request to my Laravel API for data persistenc ...

Looking to update a component in Vue 3 and Laravel 9 without the need to reload the entire webpage

Looking for a solution to refresh the header component upon clicking the logout button, in order to display the login and register options without refreshing the entire page. Any effective suggestions on how to achieve this are greatly appreciated. The l ...

Issue with Laravel Vue search-dropdown and other components failing to render correctly for certain users

We are currently implementing a searchable dropdown menu for our web application using a vue component. Strangely, the component fails to load on my local version (xampp) as well as on the deployed website. However, it displays properly on another develope ...

The Safari browser is currently having trouble loading the data sent back from the server

After successfully developing and deploying my website carspeedyrental.com, I received reports from some clients indicating that the website does not display available cars on the iPhone Safari browser. Interestingly, when tested on various browsers on A ...

Encountered an error: Vue is not recognized within Laravel environment

While working on a Laravel application with Vue 3, I encountered an issue. When trying to load the welcome.blade.php file, I couldn't see the Vue file content and received the following error in the console: Uncaught ReferenceError: Vue is not defined ...

Tips for inserting a hyperlink on every row in Vuetables using VUE.JS

Trying to implement a link structure within each row in VUEJS Vuetables has been challenging for me. Despite my research on components and slots, I am struggling to add a link with the desired structure as shown below: <td class="text-center"> <a ...

Issue with Laravel Composer: Failed to install, restoring original content in ./composer.json

I am fairly new to Laravel and I have been using Laravel 5.8 for my project development. Recently, I needed to access the file ExampleComponent.vue in the resources/js/components directory but it was not there. After referencing this link, I came to know ...

The Vuejs code functions properly in the overall application, but is not functioning within the specific component

Before, my Vue.js app worked flawlessly until I tried putting it into a Vue component. It started throwing the following error: [Vue warn]: Error compiling template. Here's the code for the component (components.php): <script> Vue.component(&ap ...

Using PHP to submit a file through an API

I'm currently working on creating an API endpoint to integrate with my Laravel and Vue application. public function avatar(Request $request) { $user = User::find(Auth::id()); $validator = Validator::make($request->all(), [ ...

In my database, I have two tables: Table1 and Table2. To better illustrate my issue, I have included a picture for reference

https://i.stack.imgur.com/GQAMy.jpg I am facing a challenge with joining two tables, table1 and table2, in MySQL. I need assistance in creating the resultant table as shown in the attached picture. Your help in solving this issue would be greatly appreci ...

Mastering Array Dispatch in VueJS

I've encountered an issue while trying to send an array of data to the backend. I attempted to include [] in the dispatch variables and on the backend, but it only captures the last data sent to the backend. My objective is to associate each data with ...

Uploading large files on Vuejs causes the browser to crash

Whenever I try to upload a file using my browser (Chrome), everything goes smoothly for files with a size of 30mb. However, if I attempt to upload a file that is 150mb in size, the browser crashes. The server's maximum upload size has been configured ...

"Embracing Micro-frontends: Building dynamic web applications using a variety of frontend

I am currently facing a software architecture dilemma. My extensive monolithic web application is built using PHP and backbone js, but I am eager to integrate a new front-end framework like react/vue. The question arises about the best approach to tackle t ...

Here is a unique rewrite: "Strategies for effectively passing the data variable in the geturldata function within Vue.js on the HTML side vary

How can I properly pass a variable in the getdataurl function in Vue.js? I need help with passing a variable in getdataurl function in Vue.js. Please provide a clear explanation and include as much detail as possible. I have tried doing some background r ...

The information transmitted from the Laravel controller is not syncing with the Vue variable as expected

I've been working on a web app with a dashboard using Laravel and Vue. While passing data from the controller to the Vue file, the data is received correctly. However, when I try to set it to a Vue variable, the value does not update in the variable. ...

Passing Parameters Using Axios in Vue.js

Currently, I am utilizing Axios within VueJS to make ajax requests. However, I have encountered an issue when attempting to send these requests. This snippet shows my JavaScript code: axios.post('http://localhost/app/php/search.php', { quer ...

Having an issue with my Vue page where it is attempting to send a request twice. My tech stack includes inertia, Laravel, and

<template> <app-layout title="Dashboard"> <template #header> <h2 class="h4 font-weight-bold">Create</h2> </template> <div class="container mt-5 text-gray-300"> ...

Learn the technique of looping through multiple HTML elements and wrapping them in Vue.js easily!

i need to wrap 2 HTML elements together Here is my code snippet using Vue.js <tr> <th v-for="(item9,index) in product_all" :key="item9.id"><center>Qty</center></th> <th v-for="(item99,index) in product_all" :key=" ...