Vue HTML Binding - Two Way?
How do I create a two way HTML binding.
by skirtle
HTML
<div id="app">
Typing into one div should update other div!
<div contenteditable=true v-content="message" @input="onInput"></div>
<div contenteditable=true v-content="message" @input="onInput"></div>
</div>
CSS
div > div {
margin: 40px;
background-color: lightgray;
padding: 5px;
}
JavaScript
new Vue({
el: "#app",
data: {
message: "Hello <b>My</b> World"
},
methods: {
onInput (ev) {
this.message = ev.target.innerHTML
}
},
directives: {
content (el, { value }) {
if (el.innerHTML !== value) {
el.innerHTML = value
}
}
}
});