Vue: Contenteditable receiving duplicate values

[timwis]

Version

2.3.3

Reproduction link

https://codepen.io/timwis/pen/YQKXBY

Steps to reproduce

Type something in the box below, click outside the area (to blur), and watch it appear double.

What is expected?

The editable div keeps what you typed in it.

What is actually happening?

The editable div adds what you typed in it assumedly as part of the virtual dom update, showing it twice.

---

My hunch is this is an issue with how virtual dom patches a <div contenteditable> that starts with an empty value. If you change its starting value in the demo to an actual value (like foo) this issue doesn't happen.

Related to #5234. Let me know if you prefer we keep the conversation there and we can close this issue.

[defcc]

Why not use v-html directive? I updated the link here https://codepen.io/anon/pen/MoWgJZ

[posva]

As you commented in the other issue, the behaviour is incosistent but contenteditable is quite weird itself. Using v-text or v-html fixes the issue but {{}} should be the same as v-html

[yyx990803]

This type of usage will be a wontfix. v-text or v-html works by wiping away the pre-existing content with completely new nodes; however when you use {{ }} bindings Vue will attempt to diff the text nodes - which will likely be made out of sync by contenteditable because how browsers handle/split the text nodes are completely unpredictable.

[timwis]

Confirmed that v-text does the trick. Thanks!

[martinesdevelop]

v-text helped me

[Aymkdn]

For people using render with createElement(), you need to use domProps:

return createElement('div', {
  attrs:{
    cotenteditable:true
  },
  domProps:{
    innerText:this.content
  }
}, '');

[Alinawaz-786]

I need your help when i was using the vue js get following error

app.js:106867 [Vue warn]: Error in v-on handler: "ReferenceError:
stripeResponseHandler is not defined"

found in

---> at
resources/js/components/MessagePackagesList.vue
at
resources/js/components/CreditDetailComponent.vue

warn @ app.js:106867
logError @ app.js:108126
globalHandleError @ app.js:108121
handleError @ app.js:108081
invokeWithErrorHandling @ app.js:108104
invoker @ app.js:108421
original._wrapper @ app.js:113774
app.js:108130 ReferenceError: stripeResponseHandler is not defined
at VueComponent.stripeResponse (app.js:4295)
at invokeWithErrorHandling (app.js:108096)
at HTMLFormElement.invoker (app.js:108421)
at HTMLFormElement.original._wrapper (app.js:113774)
logError @ app.js:108130
globalHandleError @ app.js:108121
handleError @ app.js:108081
invokeWithErrorHandling @ app.js:108104
invoker @ app.js:108421
original._wrapper @ app.js:113774
(index):3 Uncaught Error: Your key is invalid, as it contains whitespace.
For more info, see https://stripe.com/docs/stripe.js
at Function.b.validateKey ((index):3)
at Function.b.create ((index):2)
at Function.c.createToken ((index):2)
at HTMLFormElement. (app.js:4222)
at HTMLFormElement.dispatch (app.js:22950)
at HTMLFormElement.elemData.handle (app.js:22757)

how to solved thie error

On Wed, 6 Nov 2019 at 14:36, Aymeric [e-mail] wrote:

For people using render with createElement(), you need to use domProps:

return createElement('div', {
attrs:{
cotenteditable:true
},
domProps:{
innerText:this.content
}
}, '');

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue/issues/5805?email_source=notifications&email_token=ANGDLPBMTJ5SFNB766SVPHLQSKF2FA5CNFSM4DNYLIS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDF4J7A#issuecomment-550225148,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ANGDLPAB5SQGHP32HXUO2ULQSKF2FANCNFSM4DNYLISQ
.