时间戳

首页 > 解决方案 > 发出事件后清除 vue 输入字段

javascript - 发出事件后清除 vue 输入字段

问题描述

我有一个带有输入和按钮的 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>

标签： javascriptvue.js

解决方案

您在控制台中看到错误了吗？

属性或方法“名称”未在实例上定义，但在渲染期间引用

您需要添加

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>

推荐阅读