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

Posted 2023-02-23

【中文标题】在按钮上单击清除显示的文本并在 VueJs 中调用另一个函数

【英文标题】：On button click clear displayed text and call another function in VueJs

【发布时间】：2020-03-05 12:57:07

【问题描述】：

我对 Web 开发和 vue.js 还很陌生。

我有一个应用程序，我在其中输入一个 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=，但没有帮助。

帮助表示赞赏。

【参考方案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>