[Vuejs]-Beufy text input can not set value

by

0👍

I am not sure what issue you are facing but it is working fine for me. I just created a working demo, Please have a look and let me know if any changes required.

Demo :

new Vue({
  el: '#app',
  data: {
    searchText: '',
  },
  methods: {
    setSearchText(text) {
      console.log(text)
      const component = this;
      setTimeout( function() {component.searchText = text;}, 500);
    },

    clearSearchInput() {
      this.searchText = '';
      this.$refs.searchInput.$refs.input.value = '';
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.css"/>
<div id="app">
  <b-input @input="setSearchText"
             ref="searchInput">
    </b-input>
    <button @click="clearSearchInput">
    Clear Input
    </button>
  <p>Value: {{searchText}}</p>
</div>

Leave a comment