使用 Vue 访问粘贴事件数据

Question

listener在 Vue 应用程序中，我在a 上粘贴了一个内容textarea，目的是当用户将数据粘贴到该字段时运行验证代码。当我记录粘贴事件时，我可以在控制台中看到粘贴到字段中的数据位于event -> target -> value. 但我似乎无法访问它event.target.value。我究竟做错了什么？

最小的例子：

<div id="app">
  <textarea name="myField" @paste="onPaste"></textarea>
  <p>Field name: {{ fieldName }}</p>
  <p>Pasted data: {{ pasted }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    fieldName: '',
    pasted: ''
  },
  methods: {
    onPaste(event){
        console.log(event)
        this.message = event.target.name
        this.paste = event.target.value
    }
  }
})

https://jsfiddle.net/feg8pcmv/

Answer 1

首先，你的 jsfiddle 有一个小错字（this.paste而不是this.pasted）。

其次，您需要使用 ClipboardData 属性中的“getData”方法来访问文本。

https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event

this.pasted = event.clipboardData.getData('text')

https://jsfiddle.net/zfuwy9ep/

也就是说，如果您想在粘贴某些内容后获取文本区域内的整个字符串，您可以等到事件队列中的当前项目被解析，然后读取文本区域的值

setTimeout(() => {
   console.log('textarea contents', event.target.value);
})

https://jsfiddle.net/cjq1bw5u/