[Vuejs]-On button click clear displayed text and call another function in VueJs

by

1👍

✅

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>
👤Phll2

Leave a comment