q-btn click event not working on q-checkbox

Ballazx 0
Viewed 26

There is a q-checkbox inside the q-btn. I also added a div because I want to add some style to 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>

When I click on the text, the tog(item) function fires and works well, but when I click on the checkbox itself nothing happens. Is there any way to fire the tog() function when the checkbox is clicked?

quasar quasar-framework vue.js javascript
2 Answers

Did you try to pu @click="tog(item)" also on q-checkbox:

const { ref } = Vue
const app = Vue.createApp({
  setup () {
    const item = ref({toggle: false, label: 'aaa'})
    const tog = (item) => { console.log(item) }
    return { item, tog }
  }
})

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/quasar@2.7.1/dist/quasar.prod.css" rel="stylesheet" type="text/css">
  <div id="q-app">
    <q-btn
      flat
      color="blue"
      class="full-width no-padding"
      @click="tog(item)"
    >
      <q-checkbox
        class="q-mr-sm"
        v-model="item.toggle"
        @click="tog(item)"
      />
      <div class="text-caption text-grey" style="">{{ item.label }}</div>
      <q-space />
    </q-btn>
    {{item}}
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.7.1/dist/quasar.umd.prod.js"></script>

Nikola Pavicevic0

Please refer this code.

<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')

Codepen - https://codepen.io/Pratik__007/pen/zYjEENr

Patel Pratik0
Related