On button click clear displayed text and call another function in VueJs

Question

I'm fairly new to web development and vue.js.

I have an app where I enter an Id in and on button(search) click it is calling a method. This method makes an axios call to the controller and retrieves data as an object. This data is displayed in tag (not sure if this approach is correct).

After this data is displayed, when the second time I enter another Id in the field and hit the button, it still displays the old text till it fetches the new data. Once new data is retrieved, it displays the new one.

I want to clear this data everytime I hit the button for search as well as call the vue function to fetch data.

I have tried clearing the data at the beginning of the vue function call but that didn't work.

<input type="text" placeholder="Enter the ID" v-model="mId" />
<button type="button" class="searchgray" v-on:click="SubmitId">Search</button>
  <h4 style="display: inline">ID: {{queryData.Id}}</h4>
 <strong>Device Status:  </strong><span>{{queryData.deviceStatus}}</span>

<script>
export default {
components: {
  'slider': Slider,
  Slide
},
props:['showMod'],

data() {

return {
  mId '',
  queryData: {},

}
},
methods: {


  SubmitId: function () {
    this.queryData = {}
    axios.get('/Home/SearchId?Id=' + this.mId)
      .then(response => response.data).then(data => {
        this.queryData = data
      }).catch(err => {

        this.queryData = {}
        this.mId = ''
      alert(`No records found anywhere for the given mId`)

    });
  }
}
</script>

So in the above code, when I hit the Search button, it calls the SubmitId function and returns queryData. Now when I enter a new mId in input field and hit serach button it continues to display the querydata associated with the old mId till the fetching of data is completed and new query data for the new mId is returned.

I was looking for a way to clear the screen text everytime I hit the button. So I also tried doing queryData={} before the axios call, but it didn't help.

Help appreciated.

Phll2 · Accepted Answer · 2019-11-09 02:19:56Z

new Vue({
  el: '#app',
  
  props: [
    'showMod'
  ],

  data() {
    return {
      mId: '',
      queryData: {}
    }
  },
        
  methods: {
    async SubmitId () {
      const axiosRequest = () => new Promise((resolve, reject) => {
        const obj = {
          Id: Math.random(),
          deviceStatus: Math.random()
        }
        
        setTimeout(() => {
          resolve(obj)
          // reject('Not Found')
        }, 2000)
      })
      
      try {
        this.queryData = {}
        this.queryData = await axiosRequest()
      } catch (err) {
        this.mId = ''
        alert('No records found anywhere for the given mId')
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input
    v-model="mId"
    type="text"
    placeholder="Enter the ID"
  />
  
  <button
    v-on:click="SubmitId"
    type="button"
    class="searchgray"
  >
    Search
  </button>
  
  </br>

  <h4 style="display: inline">
    ID: {{ queryData.Id }}
  </h4>

  </br>

  <strong>Device Status:  </strong>
  <span>{{ queryData.deviceStatus }}</span>
</div>

Collectives™ on Stack Overflow

On button click clear displayed text and call another function in VueJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related