Vue.js点击搜索按钮时清除旧数据并调用方法的问题求助

看起来你已经尝试在请求前清空queryData了，但页面没立刻更新，这大概率是因为Vue的DOM更新是异步批量处理的，加上axios请求的异步特性，导致清空数据的操作和请求完成的更新几乎同时触发，视觉上就好像旧数据一直保留到新数据返回。另外，直接把queryData赋值为空对象，模板里渲染的queryData.Id等属性会变成undefined，但如果之前的DOM内容还没被更新，就会暂时显示旧值。

这里有两个简单有效的解决方案：

方案1：给queryData初始化所有需要渲染的属性，清空时单独重置属性 #

这种方法能确保Vue的响应式系统立刻检测到属性变化，页面会同步更新：

1. 先修改data里的queryData，初始化所有要渲染的字段：

data() {
  return {
    mId: '',
    queryData: {
      Id: '',
      deviceStatus: ''
    },
  }
}

2. 在SubmitId方法开头，单独重置这些属性，而不是直接赋值为空对象：

SubmitId: function () {
  // 单独清空每个属性，确保响应式更新
  this.queryData.Id = ''
  this.queryData.deviceStatus = ''
  
  axios.get('/Home/SearchId?Id=' + this.mId)
    .then(response => response.data)
    .then(data => {
      this.queryData = data
    })
    .catch(err => {
      this.queryData.Id = ''
      this.queryData.deviceStatus = ''
      this.mId = ''
      alert(`No records found anywhere for the given mId`)
    });
}

方案2：添加加载状态，配合模板控制显示 #

如果想在请求过程中给用户明确的加载提示，同时隐藏旧数据，可以添加一个加载状态：

1. 在data里添加isLoading属性：

data() {
  return {
    mId: '',
    queryData: {},
    isLoading: false
  }
}

2. 修改SubmitId方法，控制加载状态：

SubmitId: function () {
  this.isLoading = true
  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`)
    })
    .finally(() => {
      this.isLoading = false // 请求完成（成功/失败）都关闭加载状态
    });
}

3. 修改模板，根据加载状态控制显示：

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

<!-- 加载时显示提示，否则显示数据 -->
<div v-if="isLoading">Loading...</div>
<div v-else>
  <h4 style="display: inline">ID: {{queryData.Id}}</h4>
  <strong>Device Status: </strong><span>{{queryData.deviceStatus}}</span>
</div>

为什么原来的代码没生效？ #

Vue会把所有数据更新操作收集到一个队列中，等到下一个事件循环周期再统一更新DOM。当你执行this.queryData = {}后立刻发起axios请求，请求的回调（更新queryData）可能和DOM更新在同一个周期内执行，导致旧数据还没来得及被清除就被新数据覆盖了，视觉上就没看到清空的效果。而上面的方案1通过修改已有属性，能让Vue更及时地触发DOM更新；方案2则通过加载状态强制在请求过程中隐藏旧数据，更直观。

你可以根据自己的需求选择其中一种方案，方案1更简洁，方案2用户体验更好。

内容的提问来源于stack exchange，提问作者dokyalashot