Skip to content

Instantly share code, notes, and snippets.

@gotraveltoworld
Last active December 6, 2021 16:38
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gotraveltoworld/ecbd2ddc6a0d9bcee8baf396d683e1ba to your computer and use it in GitHub Desktop.
Save gotraveltoworld/ecbd2ddc6a0d9bcee8baf396d683e1ba to your computer and use it in GitHub Desktop.
To show the 'v-model' compositionstart and compositionend.
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
<p>the input is: <span class="name">{{result}}</span></p>
<input type="text"
:value=result
@input="compositionend"
@compositionstart="compositionstart($event)"
@compositionend="compositionend($event)"
/>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
compositing: false,
result: '',
},
methods: {
compositionstart(event = null) {
this.compositing = true;
},
compositionend(event = null) {
if (this.compositing === false) {
this.result = event.target.value;
}
},
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment