CODEWITHSUNDEEP
javascriptvue.js
theJuls
theJuls

Reputation: 7460

Clear vue input fields after emitting event

I have a Vue component with an input and a button. I would like the button to send off the input elsewhere and then clear the input. The latter part, is not happening.

Here is a rough runnable version of what I have:

new Vue({
el: '#root',
template: `
<div>
  <input type='text' v-model='name'/>
  <button @click='onClickMe'>Click me</button>
 </div>
`,
  methods: {
    onClickMe () {
     this.$emit('set-this-elsewhere', { name: this.name })
     this.name = ''
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
</div>

Upvotes: 0

Views: 1391

Answers (1)

Jaromanda X
Jaromanda X

Reputation: 1

You see the error in the console?

Property or method "name" is not defined on the instance but referenced during render

You need to add

data() { 
  return {
    name:''
  }; 
},


new Vue({
  el: '#root',
  template: `
<div>
  <input type='text' v-model='name'/>
  <button @click='onClickMe'>Click me</button>
 </div>
`,
  data() {
    return {
      name: ''
    };
  },
  methods: {
    onClickMe() {
      this.$emit('set-this-elsewhere', {
        name: this.name
      })
      this.name = ''
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
</div>

Upvotes: 3

Related Questions