Warning if v-model is empty or becomes empty

[arnauddsj]

Hello,

I'm getting this warning if I click on a contenteditable div and click outside without having typed anything.
[Vue warn]: Invalid event arguments: event validation failed for event "update:modelValue".

my v-model points to a ref("")
It also shows as soon as the v-model goes back to an empty string (when I erase the string for example)

Thank you for this plugin it's very convenient!

[hl037]

Hi,
That's weird, I may not have noticed it since sometimes I disable warnings in the dev tool, have look into it. Which version of vue and vue-contenteditable are you using ?

Thnank you for reporting anyway

[arnauddsj]

"vue-contenteditable": "^4.0.4"

"vite": "^3.0.4"
"vue": "^3.2.37",
"@vueuse/core": "^9.1.0",

[ms2d]

I am getting the same warning. If I entirely delete the contents of a <contenteditable> component, I receive a warning:

[Vue warn]: Invalid event arguments: event validation failed for event 
"update:modelValue".
warn2 @ runtime-core.esm-bundler.js:38
emit$1 @ runtime-core.esm-bundler.js:675
(anonymous) @ runtime-core.esm-bundler.js:7388
update @ vue-contenteditable.es.js:41
callWithErrorHandling @ runtime-core.esm-bundler.js:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:164
invoker @ runtime-dom.esm-bundler.js:339

[hl037]

I can reproduce too.
I don't have time to investigate it right now, maybe later this week. Anyway, that's weird, and could be a vue bug : looking at the code, it seems like the event is sending a string, which is the right type...

Since it's only a warning and does not seem to affect the usability of the lib, I tagged as enhancement

[toniengelhardt]

Also, getting this, any news?

[hyrioo-msp]

@hl037 I just looked a bit into this.
You are actually specifying validation functions in your defineEmits:

const emit = defineEmits({
  'returned' : String,
  'update:modelValue' : String,
});

Causing vue to call String() with the empty value, which then returns an empty string to the validator instead of true/false causing the warning.
It would properly be easier just to define the emits as an array:

const emit = defineEmits(['returned', 'update:modelValue']);

Or with typescript:

const emit = defineEmits<{
    (e: 'update:modelValue', value: string): void;
    (e: 'returned', value: string): void;
}>();

Or specifying a true validator as described here: https://vuejs.org/guide/components/events.html#events-validation