Vue/Javascript-粘贴事件后无法清除输入

Question

我有一个项目，用户需要将一些东西粘贴到输入字段中。在这个事件中，我需要使用粘贴的数据和清除输入字段。但我似乎不能把它弄空。

我尝试过清除绑定到输入的v-model元素，使用ref和event.target.blur((清除输入。但当有东西粘贴在里面时，似乎没有什么能清除输入。

new Vue({
el: "#app",
data: {
todo: ''
},
methods: {
onPaste: function(event) {
let clipped = event.clipboardData.getData('text');
console.log(clipped)
this.todo = ''
this.$refs['todo'].value = '';
event.target.blur();
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-model="todo" ref="todo" @paste="onPaste">
</div>

Answer 1

您可以在粘贴时使用prevent修饰符来防止本机事件，在这种情况下不需要使用$ref。

检查@paste.prevent:

new Vue({
el: "#app",
data: {
todo: ''
},
methods: {
onPaste: function(event) {
let clipped = event.clipboardData.getData('text');
console.log(clipped)
this.todo = '';
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-model="todo" @keyup.enter="addTodo" @paste.prevent="onPaste">
</div>