blur event
BarbaraWiacek opened this issue · comments
Hi and thanks for the plugin!
I noticed that blur event is not being attached to the div which is created with the plugin.
Do you know a way to walk around it?
<template> <contenteditable tag="div" v-model="value" v-on:blur="saveData(value)" v-on:returned="saveData(value)" /> </template>
Hey !
It is not fired because it is forwarded as an input event : https://github.com/hl037/vue-contenteditable/blob/master/src/contenteditable.vue#L11
but I'll have to check if it's a typo or if I did it to comply with the v-model logic
Thanks for the report !
I now remember why I forwarded blur as input : it's because vue-contenteditable-directive does so : https://github.com/asconwe/vue-contenteditable-directive/blob/master/src/index.js#L16
Though, I now have to check if it's actually needed
Note : you can use @blur.native
This only works with single element. I have this component inside a table's rows. the @blur.native event only works on single row
Hi, could you send an example ? Have you tested on version 3.x ?
anyway, I'm using v1.0.2
https://codesandbox.io/s/awesome-lederberg-5ftgx
it works if the data contains text only. if it contains any html string, @blur.native doesn't work
I don't really see what do you expect nor what is not as you expected on this snippet. Anyway, I did some modification to see what happens :
https://codesandbox.io/s/busy-river-g645c
It looks like your quotes for the class is wrong. HTML uses double quotes, and you wrote single quotes. Thus, when mounting on the dom, the content of the contenteditable (remember, the content of a contenteditable is parsed and converted to DOM node by the JS engine. Thus, the original string content is lost, and only a canonical representation remain) is changed.
But I don't think this is a bug. Just, you need to know that when using with noHTML=false