I'm facing an issue with my Vue component that has an input and a button. I want the button to send the input data elsewhere and then clear the input field, but it's not working as expected.
Below is a basic runnable version of what I currently 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>