Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vue Editor Tutorial - Step 1 - 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment