發出事件后清除 vue 輸入字段

Question

我有一個帶有輸入和按鈕的 Vue 組件。 我希望按鈕在別處發送輸入，然后清除輸入。 后半部分，沒有發生。

這是我所擁有的粗略可運行版本：

 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>

Answer 1

您在控制台中看到錯誤了嗎？

屬性或方法“名稱”未在實例上定義，但在渲染期間被引用

你需要添加

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>