q-btn click event not working on q-checkbox-CodePudding

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"
      
      @click="tog(item)"
    >
      <q-checkbox
        
        v-model="item.toggle"
      />

      <div  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?

CodePudding user response：

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/[email protected]/dist/quasar.prod.css" rel="stylesheet" type="text/css">
  <div id="q-app">
    <q-btn
      flat
      color="blue"
      
      @click="tog(item)"
    >
      <q-checkbox
        
        v-model="item.toggle"
        @click="tog(item)"
      />
      <div  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/[email protected]/dist/quasar.umd.prod.js"></script>

CodePudding user response：

Please refer this code.

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

      <div  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