vue给数组赋值页面没有更新渲染（和别人的不一样）

Lysun001

于 2024-07-19 15:39:44 发布

阅读量1.1k

点赞数 1

文章标签：前端 vue.js ui vue

本文链接：https://blog.csdn.net/lotpyve/article/details/140551163

版权

今天在项目中测试给我测出来了一个问题，但是我反复检查，感觉代码没有问题，但是页面就是不更新，最后我慢慢的尝试，找到了问题的解决方法，不过目前还不清楚为什么会出现这个问题

解决方法：给渲染数组的那个标签外面在加一层div标签就可以了

由于公司的代码我不能泄露，但是我重试复现，没出现那个问题，项目比较忙，我就不去细细琢磨了，以下代码 bug 没复现，只提供参考

<template>
  <div>
    <el-button @click="delList">清除数组</el-button>
    <el-button @click="getList">清除后赋值数组</el-button>
    <!-- 问题假设：假如下面这个赋值的时候，没有重新选择在页面上 -->
    <div v-for="(item,index) in testList"
         :key="index"
         class="item">
      {{ item }}
    </div>
    <!-- 解决方案：在选择数组的标签外面在加一层 div 标签  -->
    <!-- <div>
      <div v-for="(item,index) in testList"
           :key="index"
           class="item">
        {{ item }}
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'testList',
  data () {
    return {
      testList: [1, 2, 3, 4]
    }
  },
  methods: {
    delList () {
      // 模拟请求
      setTimeout(() => {
        this.testList = []
      }, 100)
    },
    getList () {
      // 模拟请求
      setTimeout(() => {
        this.testList = [7, 8, 9, 10]
      }, 100)
    }
  }
}	
</script>

<style>
.item:nth-child(even) {
  background-color: pink;
}
</style>