Sometimes, we want to use v-model with contenteditable elements in Vue.js.

In this article, we’ll look at how to use v-model with contenteditable elements in Vue.js.

How to use v-model with contenteditable elements in Vue.js?

To use v-model with contenteditable elements in Vue.js, we should replace it with @input and put the content into the element itself.

For instance, we write

<template>
  <p contenteditable @input="onInput">
    {{ content }}
  </p>
</template>

<script>
export default {
  data() {
    return { content: "hello world" };
  },
  methods: {
    onInput(e) {
      console.log(e.target.innerText);
    },
  },
};
</script>

to set @input to onInput to watch for changes in the content of the contenteditable p element.

In onInput, we get the content of the p element with e.target.innerText.

Conclusion

To use v-model with contenteditable elements in Vue.js, we should replace it with @input and put the content into the element itself.