UToggle give wrong status onClick()

[hoanghadu]

Environment

---

• Operating System: Linux
• Node Version: v20.8.0
• Nuxt Version: 3.8.2
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: pnpm@8.6.11
• Builder: -
• User Config: ssr, devtools, modules, extends, colorMode, routeRules, vuefire
• Runtime Modules: @nuxt/ui@2.11.0, @nuxt/content@2.9.0, nuxt-vuefire@0.3.1, @nuxt/image@1.0.0-rc.3, @nuxthq/studio@1.0.5, @vueuse/nuxt@10.7.0, @nuxtjs/color-mode@3.3.2
• Build Modules: -

Version

v2.11.1

Reproduction

<script setup>
const selected = ref(false)
function checkStatus() {
  console.log(selected.value)
}
</script>

<template>
  <UToggle v-model="selected" @click="checkStatus()" />
</template>

Description

The @change doesn't work.
@click give the wrong status of the variable

[benjamincanac]

The change event was indeed missing, thanks for the report! 😊

The click will never work for sure, you'd better watch the selected value instead.

[hoanghadu]

Please implement @change event in next release. Thank you 🙇‍♂️

[benjamincanac]

It has been done in 4c84839

[Sadhill94]

I do not get the @change event emitted, seems like it has been added, but not on set()

set (value) {
emit('update:modelValue', value)
emitFormChange()
}

[benjamincanac]

Why not watch the selected ref?

[Sadhill94]

It's a possibility but since i saw that the @change was actually added in the release (4c84839) that's why i've tried to listen to it but it never fires

[benjamincanac]

@Sadhill94 This will be fixed by #1560. It was my mistake, the emitFormChange wasn't emitting an actual change event but used only to forward to the form bus.

[Sadhill94]

Thank you and thanks for your work!