samedi 29 février 2020

In Vuetify, how to prevent the click on a chip inside a checkbox to check the checkbox?

I have a chip inside a checkbox, and I thought "@click.stop" or "@click.capture" would prevent the checkbox to be checked. But it doesnt't work. Have I misunderstood something?

  <v-checkbox
    v-model="myModel"
    hide-details
  >
    <template v-slot:label>
      <div>
        My label
        <v-tooltip bottom>
          <template v-slot:activator="{ on }">
            <v-chip
              class="ma-2"
              color="green"
              text-color="white"
              v-on="on"
              @click.capture="myValue = true"
            >
              <v-avatar left>
                <v-icon>mdi-help-circle-outline</v-icon>
              </v-avatar>
              chip content
            </v-chip>
          </template>
          The tooltip
        </v-tooltip>
      </div>
    </template>
  </v-checkbox>

"myValue" updates correctly, but the checkbox toggles anyway...

Thanks in advance :)




Aucun commentaire:

Enregistrer un commentaire