Vue 数组和对象更新，但是页面没有刷新

男娘i 2021-12-21 14:37 232阅读 0赞

在使用数组的时候，数组内部数据发生改变，但是与数组绑定的页面的数据却没有发生变化。

<ul>
          <li v-for="(item,index) in todos" :key="index">{
         {item.name}}</li>
      </ul>

data () {
        return {
          msg: 'Welcome to Your Vue.js App',
          todos: [{
            name: 'aa',
            age: 14
          }, {
            name: 'bb',
            age: 15
    
          }, {
            name: 'cc',
            age: 16
    
          }],
          obj: {name: 'lihui', age: 17}
        }
      },

methods: {
        changeTodos: function () {
          var _this = this
          _this.todos[0] = {
            name: 'zhangsan',
            age: 15
          }
          console.log(this.todos)
          /*
           this.$set(this.todos, 0, 'nn')
          this.$forceUpdate()
    */
        }

这种修改得方式，无法出发数组得set,导致页面得数据不会改变。有三种解决方式。

一、使用全局得set方法。

this.$set(this.todos,0,\{name: 'zhangsan',age: 15\})；或者对象this.$set(this.obj,'key',value);

二，强制更新

this.$forceUpdate()

转载于:https://www.cnblogs.com/chzlh/p/10064286.html

发表评论取消回复

表情：

评论列表（有 0 条评论，232人围观）

还没有评论，来说两句吧...

相关阅读

相关【vue3】vue3 reactive 数据更新但是页面不更新

vue3数据更新但是页面不更新解决方法一：把reactive换成ref 解决方法二：把reactive再封装一层，作为对象的属性参考资料：

曾经终败给现在/ 2024年03月31日 14:06/ 0 赞/ 44 阅读

相关 vue页面跳转没有刷新数据

情景： A页面新增数据，B页面查看新增数据，B页面查看不到刚刚新增的数据原因：页面B加载时，没有执行created（）函数，所以可能是使用了缓存数据解决方法：

àì夳堔傛蜴生んèń/ 2023年01月07日 14:26/ 0 赞/ 178 阅读

相关 vue中数组和对象的更新；检测变化；响应式原理；检测更新

[官网][Link 1] 只做链接记录 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

水深无声/ 2022年11月15日 14:13/ 0 赞/ 115 阅读

相关（13）vue刷新页面

常用的有三种方法，最后一种用的比较多： 1.使用`window.location.href` `window.location.replace()` `window.l

逃离我推掉我的手/ 2022年10月01日 12:51/ 0 赞/ 166 阅读

相关 vue对象和数组的增删改操作

一、对象例： tableList: { }, 1、往对象里面添加属性： tableList: {

刺骨的言语ヽ痛彻心扉/ 2022年09月13日 04:25/ 0 赞/ 151 阅读

相关 vue 变更url但是不去刷新页面,类似标记

vue router 更改地址url 不刷新页面不存在history记录里面 this.$router.push() 改为 this.$router.replace()

àì夳堔傛蜴生んèń/ 2022年03月26日 08:10/ 0 赞/ 644 阅读

相关 Vue 数组和对象更新，但是页面没有刷新

在使用数组的时候，数组内部数据发生改变，但是与数组绑定的页面的数据却没有发生变化。 <ul> <li v-for="(item,index) in

男娘i/ 2021年12月21日 14:37/ 0 赞/ 233 阅读

相关 Vue项目中数组和对象更改后视图不刷新的问题

Vue数据响应原理官方解释如下：当你把一个普通的 JavaScript 对象传入 Vue 实例作为 `data` 选项，Vue 将遍历此对象所有的属性，并使用 [`

淩亂°似流年/ 2021年12月16日 00:35/ 0 赞/ 425 阅读

相关 vue - props 声明数组和对象

props: { array: { type: Array, default: () => []

约定不等于承诺〃/ 2021年09月20日 13:40/ 0 赞/ 540 阅读

相关解决数组，对象更新但vue视图不更新

> 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。一：检测变化注意 1.1 对于

﹏ヽ暗。殇╰゛Y/ 2021年09月04日 08:39/ 0 赞/ 486 阅读