Sometimes, we want to get the content of a contentEditable element with Vue.js.
In this article, we’ll look at how to get the content of a contentEditable element with Vue.js.
How to get the content of a contentEditable element with Vue.js?
To get the content of a contentEditable element with Vue.js, we can listen to the input event on the contentEditable element.
For instance, we write:
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id='app'>
</div>
to add the Vue script and app container.
Then we write:
const v = new Vue({
el: '#app',
template: `
<p
contenteditable
@input="onInput"
>
{{ content }}
</p>
`,
data: {
content: 'hello world'
},
methods: {
onInput(e) {
console.log(e.target.innerText);
},
},
})
We have a contentEditable p element.
And we listen to the input event with @input="onInput".
And we get the content of the div when it’s being changed with e.target.innerText.
We put the initial content of the p element in content.
Conclusion
To get the content of a contentEditable element with Vue.js, we can listen to the input event on the contentEditable element.
