如何在事件后清除 Buefy 输入（VueJS）？答案

【问题标题】：How to clear Buefy input after event (VueJS)?如何在事件后清除 Buefy 输入（VueJS）？
【发布时间】：2018-06-04 20:27:43
【问题描述】：

我正在尝试使用事件清除 Buefy 输入，但没有任何反应。但是，此代码适用于基本输入。

这是我的 HTML：

<b-field>
  <b-input
    id="itemForm"
    placeholder="label"
    @keyup.enter.native="addItem">
  </b-input>
</b-field>

这是我的脚本：

methods: {
  addItem () {
    var input = document.getElementById('itemForm')

    if (input.value !== '') {
      this.items.push({
        name: input.value
      })
      input.value = ''
    }
  }
}

【问题讨论】：

标签： input vue.js bulma buefy

【解决方案1】：

我试过了，但我不确定，但使用 buefy 使用 @keyup.enter 的唯一方法是：@keyup.native.enter

但是我认为你想要这样的东西：see it in action

<div id="app" class="container">

  <ul>
    <li v-for="section in sections" :key="section.id">
      {{section.name}}
    </li>
  </ul>

    <section >
        <b-field label="Name">
            <b-input v-model.trim="name" @keyup.native.enter="addItem()" placeholder="Write and press enter"></b-input>
        </b-field>
    </section>

</div>

还有脚本：

Vue.use(Buefy.default)


    const example = {
        data() {
            return {
              sections: [],
              name: ''
            }
        },
      methods: {
        addItem () {
          this.sections.push({
            name: this.name,
            id: Date.now()
          })

          this.name = ''
        }
      }
    }


const app = new Vue(example)

app.$mount('#app')

【讨论】：

谢谢，它可以与v-model.trim 一起清除输入。 @keyup.enter.native 也可以与 buefy 一起使用，但我不知道 @keyup.native.enter 之间有什么区别
如果你在 events 选项卡上查看 buefy 输入的 API，你会看到如何使用事件。不过，我建议你使用 vuetify 它更容易、灵活和完整。