AJAX轮询获取数据后Vue的v-for指令无法渲染组件问题求助

核心问题及修改方案如下： #

1. 定时器配置错误 #

mounted钩子中给setInterval传参时直接执行了loadContacts方法，没有传入函数引用，导致定时器仅执行一次方法，没有按预期轮询：

// 错误写法
this.timer = setInterval(this.loadContacts(), 1000)
// 正确写法：去掉括号，传入函数引用
this.timer = setInterval(this.loadContacts, 1000)

2. 接口返回字段大小写不匹配 #

从代码console.log(_this.contacts[0].convUserName)可判断，接口返回的用户名字段是convUserName（Name首字母大写），但模板中v-for的key、渲染值都写成了convUsername（name首字母小写），键名不匹配导致读取不到值，v-for无法正确渲染：

<template>
  <!-- 移除不存在的componentKey绑定，如需要强制刷新组件可单独在data中定义该变量 -->
  <div>
    <el-row class="card"  v-for="contact in contacts" :key="contact.convUserName">
      <div class="avatar" ><el-avatar icon="el-icon-user-solid"></el-avatar></div>
      <h5 class="name" v-if="contact">{{contact.convUserName}}</h5>
      <div class="btnDel"><el-button size="medium" type="danger" icon="el-icon-delete" v-on:click="delContact(contact.convUserName)"></el-button></div>
    </el-row>
  </div>
</template>

注：同时将重复的id改为class，避免违反HTML同一页面ID唯一的规范。

3. 冗余逻辑优化 #

• 移除beforeMount中的重复请求逻辑，避免重复调用接口
• loadContacts方法中无需做JSON序列化再反序列化的冗余操作，直接赋值即可触发Vue响应式更新

// 优化后的生命周期钩子
mounted() {
  // 先调用一次获取初始数据
  this.loadContacts()
  // 启动轮询
  this.timer = setInterval(this.loadContacts, 1000)
},
beforeDestroy() {
  clearInterval(this.timer)
  this.timer = null
}

// 优化后的轮询方法
loadContacts () {
  this.$axios.post('/msglist',{
    ownerUsername: localStorage.getItem('username')
  }).then(resp => {
    this.contacts = resp.data
  }).catch(failResponse => {
    console.log(failResponse)
  })
}

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