一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

起因：在工作的时候遇到一种情况，在获取到后端的值后显示出问题，但是确实拿到了数据，非常奇怪。

由于在这次项目中对接的接口是由后端完全控制来操作前端的标题和细节等展示信息的，所以在对接接口，处理数据这一方面面就显得比较麻烦并且复杂。

那么接下来切入正题。话不多说，看代码

let getData = await fetch()
this.titleData = getData[0].fieldList
this.detailData = getData[1].data
for(let i = 0;i < this.detailData.length; i++){
  this.allData[i] = JSON.parse(JSON.stringify(this.titleData))
  //凭空捏造 利用索引直接设置数组的某得值时   vue检测不到数组的变化
  this.$set(this.allData,'i',JSON.parse(JSON.stringify(this.titleData)))
  console.log(this.allData[i],'this.allData[i]');
  for(let key in this.detailData[i]){
    this.allData[i].forEach((item) =>{
      if(item.fieldMapper == key){
        item.fieldDetailValue = this.detailData[i][key]
      }
    })
  }
}

titleDate 和detailDate都是在对接接口时候拿到的数据，并且由于键值对，也就是

如图所示，左右两边的数据都是由循环得到并且后台控制，左边的标题由titleDate获取，右边的数值由detailDate获取，并且由于是循环得出，所以在这里我就自行处理数据，将两者拼接到一个数组中，并且titleDate是有相对应的映射值指向detailDate 的。所以在这里处理数据用到了两层for循环和一层forEach循环。

数据回显出问题的情况就出在了由于数据的多少也是由后台传过来的，所以在最外层是凭空捏造的数组内容赋值。

关键就在这。

在检查了好久之后，发现是dom没有更新，然后就想到了$set（同事提醒）,但是在此之前由于本人萌新小白，并没有怎么遇到过这种情况，所以特地去翻阅了一些文档。发现

当利用一个索引直接设置一个数组项的时候

修改数组长度的时候

vue是检测不到数组变化的。 那么怎么解决这个问题呢，答案就是$set.

用法： this.$set(原数组, 索引值, 需要赋的值)

也就是在代码块中 this.$set(this.allData,'i',JSON.parse(JSON.stringify(this.titleData)))，我想要赋值的对象是data对象中的数据allDATA,想要赋值的索引时i，因为i是动态接口获取得到的，需要赋值的就是title，然后在通过循环进行数据重新构建，来达到我想要的数据结构实现渲染数据。

另外这里用到了JSON.parse(JSON.stringify(this.titleData))，为什么呢，在之前的文章提提到过，JSON.parse(JSON.stringify())是一种深拷贝的方法，为了数据能够重新开辟一块新的空间存储，不然后续的循环就会一直拿到同一个数据地址，在该地址上进行操作，这样数据就会出现一样的bug。

本人是萌新小白，如果有说的不好的地方，希望大佬多多指正，感谢各位技术大牛。