Очистить поля ввода vue после испускания события


Очистить поля ввода vue после испускания события

28.10.2020 02:38:01 Просмотров 3 Источник

У меня есть компонент 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>

У вопроса есть решение - Посмотреть?

Ответы - Очистить поля ввода vue после испускания события / Clear vue input fields after emitting event

Является ответом!
Jaromanda X

28.10.2020 02:44:31

Вы видите ошибку в консоли?

Свойство или метод "name" не определяется в экземпляре, но на него ссылаются во время рендеринга

Вам нужно добавить

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>

Помочь в развитии проекта:
Закрыть X