前端之家

  1. 首页
  2. 问答

在按钮上单击以清除显示的文本，然后调用VueJs中的另一个函数

• 问答

我对Web开发和vue.js相当陌生。

我有一个应用程序，我在其中输入ID并在其上输入ID（搜索），然后单击它正在调用方法。此方法对控制器进行axios调用，并作为对象检索数据。 此数据显示在标记中（不确定此方法是否正确）。

显示此数据后，当我第二次在字段中输入另一个ID并单击按钮时，它仍显示旧文本，直到获取新数据为止。检索到新数据后，它将显示新数据。

我想每次点击按钮进行搜索时都清除此数据，并调用vue函数来获取数据。

我曾尝试在vue函数调用开始时清除数据，但这没用。

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

因此在上面的代码中，当我按下“搜索”按钮时，它将调用SubmitId函数并返回queryData。现在，当我在输入字段中输入新的mId并按下serach按钮时，它将继续显示与旧的mId相关联的查询数据，直到数据获取完成并返回新mId的新查询数据为止。

我一直在寻找一种方法，每次按一下按钮即可清除屏幕文字。因此，我也尝试在axios调用之前执行queryData = {}，但这没有帮助。

帮助表示赞赏。

lj13700510051 回答：在按钮上单击以清除显示的文本，然后调用VueJs中的另一个函数

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>

htmlvue-componentvue.jsvuejs2web-applications
本文链接：https://www.f2er.com/3134910.html

大家都在问