0

I have a project where users need to paste something into an input field. Inside this event I need to use the pasted data and the clear the input field. But I cannot seem to get it empty.

I have tried clearing the v-model element binded to the input, clearing the input using ref and event.target.blur(). But nothing seems to clear the input when something is pasted inside.

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>
Stephen
  • 913
  • 3
  • 24
  • 50

1 Answers1

3

You can use the prevent modifier on paste to prevent the native event and you don't need to use the $ref in this case.

Check @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>
Leonardo Nakao
  • 71
  • 3