Help us understand the problem. What is going on with this article?

Vue paste時にイベントを発火させる

コード

</template>
  <input v-model="name" @paste="onPaste"></input>
</template>
<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  methods: {
    onPaste(event) {
      setTimeout( () => {
        console.log('お名前😃', this.name);
      }, 10)
    }
  }
}
</script>

注意点

onpaste - ペースト時に発火する

注意しなければいけないのは、イベントが発火して処理が実行される時点では、まだフォームには貼り付けた値が入力されていないということです。流れとしては、貼り付けを実行、イベントが発火して処理を実行、フォームに貼り付けた値が入力される、という順番になります。なのでonpasteイベントで貼り付けた値を取得したい場合は、例えばsetTimeout()で処理の実行を遅らせましょう。

イベントが発火して、処理が実行される時点では、まだフォームに値が入っていない。(Vueだと、dataオブジェクトに反映されていない。)

参考資料

How to handle Paste(Ctrl+v or with mouse) event in vue.js?
onpaste - ペースト時に発火する

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away