Vue数组赋值不更新问题及解决方案-CSDN博客

在Vue中遇到数组渲染的表格无法响应数组值变化的问题。通过测试发现，直接修改数组如`push`、`pop`等操作不会触发视图更新。查阅官方文档后了解到这是JavaScript的限制，Vue无法检测到这些数组变动。解决方法是使用Vue提供的`Vue.set`、`$set`或者使用`splice`方法完成数组更新，以确保视图同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出现的问题

昨天工作内遇到的问题，用输入arrList渲染了一个表格，修改了arrList，然而列表没有改变。 Vue 不是双向绑定吗？怎么回事？what's fuck 值变了? 列表没有变？？？

测试代码

    //Vue中列表渲染的数据是这样的,单价和数量
    renderData:[
            {perPrice: 1, number: 10},
            {perPrice: 1, number: 20},
            {perPrice: 1, number: 30},
          ]
复制代码

  html 就不写了，反正就是列表渲染
复制代码

效果如下

我给还原按钮写了个事件，点击修改renderData

//还原按钮的点击事件
resetData(){
      this.renderData[0] = {perPrice: 1, number: 10}
      this.renderData.length = 1
    }
复制代码

点击还原，列表毫无反应，我明明改变了数组的值，还有他的长度。

解决

最后阅读了Vue的[官方文档](cn.vuejs.org/v2/guide/li…" 百度一下")，找到了答案由于 JavaScript 的限制，Vue 不能检测刚刚的数组修改操作

代码修改

//还原按钮的点击事件
resetData(){
          this.$set(this.renderData,0,{perPrice: 1, number: 10})
          this.renderData.splice(1)
          console.log(this.renderData);
        }
复制代码