How to use useVModel/useVModels with script setup?

[darrylnoakes]

Just a question as to how to use useVModel/useVModels with script setup.
Do they work at all with script setup? If so, how?

I believe there is a Discord server or something for this sort of thing, but I couldn't find it.

Sorry if I missed something obvious.

[wheatjs]

In <script setup> you can use defineProps and defineEmits

So it would look something like

<script setup>
import { useVModel } from '@vueuse/core'

const props = defineProps({ data: String })
const emit = defineEmits(['update:data'])
const data = useVModel(props, data, emit)
</script>

[darrylnoakes]

Ah, thanks.

I defined the props, but I defined the emits as empty, as this is what seemed the most similar to the example.
It works fine when the emits are defined, or when emit is not passed to useVModel/useVModels (which causes them to fall back to vm?.emit).
Maybe the example could be updated to be clear about script setup usage needing this?

P.S. Sorry, I completely forgot about Discussions :).

[cberthiaume]

Agreed about maybe clarifying the documentation. I was following the same example and got the warning, Component emitted event "update:data" but it is neither declared in the emits option nor as an "onUpdate:data" prop., when my emit was not empty. I'd assumed useVModels added the event to the emit definition. I didn't realize I needed to add it myself.

Thanks for the clarification here.

[mgnrfk]

I just had this issue of event not declared, what is the right way to do this?
Tried with const emit = defineEmits(['update:xxx']) but it wont work`