The onClick event for a q-btn does not seem to be functioning properly when used

Inside the q-btn, there is a q-checkbox. Additionally, I included a div to style the text.

<q-btn
      flat
      color="blue"
      class="full-width no-padding"
      @click="tog(item)"
    >
      <q-checkbox
        class="q-mr-sm"
        v-model="item.toggle"
      />

      <div class="text-caption text-grey" style="">{{ item.label }}</div>
      <q-space />
    </q-btn>

After clicking on the text, the tog(item) function executes perfectly. However, when clicking directly on the checkbox, nothing happens. Is there a way to trigger the tog() function when clicking on the checkbox itself?

javascriptvue.jsquasar-frameworkquasar

Answer №1

Take a look at this code snippet.

<q-btn color="white" text-color="black" label="Standard"  @click.stop="tog()">
      
       <q-checkbox
        class="q-mr-sm"
        v-model="item.toggle"
      />

      <div class="text-caption text-grey" style="">{{ item.label }}</div>
      <q-space />
    </q-btn>

const { ref } = Vue

const app = Vue.createApp({
  setup () {
    return {
      item: ref({toggle: false, label: 'aaa'})
    }
  },
  methods:{
    tog(){
      this.item.toggle = !this.item.toggle
    }
  }
})

app.use(Quasar, { config: {} })
app.mount('#q-app')

Check out the Codepen link here - https://codepen.io/Pratik__007/pen/zYjEENr

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

Refresh div content dynamically with anchor tag in place

I have a dilemma with the following div that contains an anchor tag linking to a php script responsible for updating information in a database and returning to this page. My goal is to execute this php script by clicking on the anchor tag, update the datab ...

javascriptphpjqueryhtmlajax

Discover the most helpful keyboard shortcuts for Next.js 13!

If you're working with a standard Next.js 13 app that doesn't have the experimental app directory, setting up keyboard shortcuts can be done like this: import { useCallback, useEffect } from 'react'; export default function App() { c ...

javascriptreactjstypescriptnext.js

What strategies can be employed to manage three conflicting versions of a single library within a Vite project?

I am currently facing a unique challenge in my web app development process. Specifically, I am using the Vite framework with the svelte-ts template setup to build an application that integrates different libraries for WebXR based augmented reality. The goa ...

javascriptthree.jssveltevitedependency-management

Executing a function while adjusting a range slider

Having an <input type="range"> element on my website presents a particular challenge. To handle changes in this element, I am using the following function: $("#selector").bind("change", function() { //perform desire ...

javascriptjquery

My Angular JS http.get request is failing to reach the specified URL

While working with AngularJS to integrate RESTful web services into my website, I am encountering an issue where I am consistently receiving errors instead of successful responses. I have been stuck on this for the past three days and any assistance would ...

javascriptangularjs

Iterating through a JSON array using the JQuery .each method

Greetings! I'm trying to figure out how to access the msg -> items using jQuery's .each() method. { "msg": [ { "msg_id": "18628", "msg_userid": "12", "msg ...

javascriptjqueryarraysjsoneach

Ways to access a JavaScript object beyond the function scope

Using the code below, I am able to retrieve JSON data when an element is clicked. This data is then used to create a table, fill the cells with images, and append the table to a specific div. function LoadImagesByCategory() { $.getJSON("/Service/GetJs ...

javascriptjquery

Looking for a custom JavaScript color wheel with advanced features?

In search of a javascript color picker/wheel that allows users to easily select colors for our paint shop. Once the color is selected, it should automatically add the color value to the shopping cart. Our online store is operated using PrestaShop, so we ...

phpjavascriptjqueryprestashopcolor-wheel

unable to apply angular measurement inside quotation marks

What is the reason for this issue: <ul class="dropdown-menu"> <li ng-repeat="choice in dropDownItems"> <a class="btn" ng-click="mnuClick('{{choice}}')">{{choice}}</a> </li> </ul> However, this code wo ...

javascriptangularjs

Concentrate on the HTML element once it becomes active

I am facing a challenge where I need to focus on a specific input element. However, there is a spinner that appears on page load and remains hidden until certain http requests are completed. All inputs are disabled until the requests are finished. The setu ...

javascriptjqueryhtmlcssangularjs

Syntax Error in Node.js for MongoDB: Unexpected token or invalid symbol

I'm having trouble figuring out what's going on. Node v16.4.2, NPM v7.18.1 const mongoose = require("mongoose"); // const dotenv = require('dotenv') require('dotenv').config({path:'variables.env'}); mongoo ...

javascriptnode.jsmongodbmongoose

What is the best method to eliminate a "0" entry from a javascript event array?

Hello, I've got an array structured as follows: let test = ["testOne:,O,U,0","testTwo:R,C,0","testTree:1.334","testFour:r,z"]; I'm looking to iterate through the array and remove any occurrences of the cha ...

javascriptarraysstringtypescript

Using a JSON file as a database for a project featuring HTML, CSS, and Vanilla JavaScript

Our task was to create a project that exclusively utilized JSON files for data storage. The data structure we were working with resembles the following: [ { "aircraftName": "Boeing 747", "departDate": 1640173020000, ...

javascripthtmlcssjson

What is the best way to utilize an HTML form for updating a database entry using the "patch" method?

I have been attempting to update documents in my mongoDB database using JavaScript. I understand that forms typically only support post/get methods, which has limitations. Therefore, I am looking for an alternative method to successfully update the documen ...

javascriptexpressmongoosepatch

Nested loops seem to override previous results with the final output

I am attempting to iterate through an array of months nested within an array of 'years' in order to calculate a count for each month using a custom angular filter. Initially, I set up the structure I will be looping through in the first while loo ...

javascriptarraysangularjsloops

Data loss from AngularJS multipartForm directive when redirecting to different routes

Having trouble with an Excel file uploader and data parsing in the routes? It seems like the FormData is getting lost when sent through the $http service route. Any advice or experience on how to handle this issue would be greatly appreciated! Html View: ...

javascriptangularjsnode.jsformsfile

Adding a modified (id) content inline template element to another element: A step-by-step guide

In the given scenario, I am looking to achieve a function where each time the add button is clicked, the content within the template div should be appended to the element with the landingzone class. Additionally, it is important that the NEWID changes for ...

javascriptjquery

Creating a hierarchical tree in JavaScript and generating nested UL/LI output with ExpressJS

I have a piece of code from another request that is functioning properly. It creates a hierarchical tree with deep levels using JSON. However, I require the output to be in the form of an HTML UL/LI nested structure or a select menu for parent and child el ...

javascriptnode.jsexpress

The request's body in the PUT method is void

I seem to be having an issue with my PUT request. While all my other requests are functioning properly, the req.body appears to remain empty, causing this error message to occur: errmsg: "'$set' is empty. You must specify a field like so: ...

javascriptnode.jsmongodbexpressput

Transferring Data Between Two Forms

Is there a way to transfer data between two HTML forms? For example, let's say we have two forms: Form 1: Contains a field for name and a submit button. Form 2: Contains fields for name, email, and a submit button. I would like to be able to fill o ...

phpjavascripthtmlforms