Javascript 使用Vue访问粘贴事件数据

在Vue应用程序中，我在

文本区域

上有一个粘贴

侦听器

，目的是在用户将数据粘贴到此字段时运行验证代码。当我记录粘贴事件时，我可以在控制台中看到粘贴到字段中的数据位于

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>

---

首先，您的JSFIDLE有一个小的输入错误（

this.paste

而不是

this.pasted

）

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

也就是说，如果希望在粘贴某个内容后将整个字符串放在文本区域内，可以等到事件队列中的当前项已解析后再读取文本区域的值

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

根据MDN文档，目前（截至目前）关于

当用户尝试粘贴文本时，将触发粘贴事件

请注意，目前没有唯一的DOM方法来获取正在生成的文本 粘贴；你必须使用剪贴板来获取这些信息

而且，由于它们还在起草阶段，支持旧浏览器可能无法实现

一个不太整洁的解决方案是使用

setTimeout

：

  methods: {
    onPaste(event){
      setTimeout(() => {
      console.log(event);
      this.fieldName = event.target.name;
      this.pasted = event.target.value }, 100);
    }
  }

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

  methods: {
    onPaste(event){
      setTimeout(() => {
      console.log(event);
      this.fieldName = event.target.name;
      this.pasted = event.target.value }, 100);
    }
  }