Vue Editor Tutorial - Step 1 - SourceText.vue

SourceText.vue

<template>
  <div class="source-text">
    <div class="source-text__code" ref="content" @input="throttledUpdate" contenteditable="true" spellcheck="false"></div>
    <div class="has-text-left">
      <button @click="$emit('input', '')" class="button is-success">Clear</button>
    </div>
  </div>
</template>
<script>
import {debounce} from 'lodash-es'

export default {
  name: 'source-text',
  props: {
    value: {type: String, default: ''},
  },
  mounted() {
    this.$refs.content.innerText = this.value
  },
  watch: {
    value(value) {
      if (value !== this.$refs.content.innerText) {
        this.$refs.content.innerText = this.value
      }
    }
  },
  methods: {
    update(event) {
      this.$emit('input', event.target.innerText)
    },
    throttledUpdate: debounce(function (event) {
      this.update(event)
    }, 250),
  },
}
</script>