Как очистить ввод Buefy после события (VueJS)?

Я пытаюсь очистить ввод 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 buefy bulma
person Bonsai    schedule 04.06.2018    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я пробовал и не уверен, но единственный способ использовать @keyup.enter с помощью buefy: @keyup.native.enter

Однако я думаю, вам нужно что-то вроде этого: увидеть это в действии

<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')
person roli roli    schedule 04.06.2018
comment
Спасибо, он работает с v-model.trim, чтобы очистить ввод. И @keyup.enter.native тоже работают с buefy, но я не понимаю, какая разница между @keyup.native.enter - person Bonsai; 05.06.2018
comment
Если вы посмотрите API ввода buefy на вкладке событий, вы увидите, как использовать события. Тем не менее, я предлагаю вам использовать vuetify, он более простой, гибкий и полный. - person roli roli; 05.06.2018