Vue/Javascript - 粘贴事件后无法清除输入
Vue/Javascript - Unable to clear input after paste event
我有一个项目,用户需要将某些内容粘贴到输入字段中。在此事件中,我需要使用粘贴的数据并清除输入字段。但我似乎无法将其清空。
我尝试清除绑定到输入的 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>
您可以在粘贴时使用 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>
我有一个项目,用户需要将某些内容粘贴到输入字段中。在此事件中,我需要使用粘贴的数据并清除输入字段。但我似乎无法将其清空。
我尝试清除绑定到输入的 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>
您可以在粘贴时使用 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>