vue2更改data里的变量不生效时,深层更改data里的变量问题

更新时间：2024年03月01日 09:01:28 作者：美酒没故事°

这篇文章主要介绍了vue2更改data里的变量不生效时,深层更改data里的变量问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue2更改data里变量不生效,深层更改data里变量

如下图，当data里的数据多层嵌套

语法：

this.$set(位置,‘属性',‘值');

示例：

this.$set(this.schoolBag[0].bagData[2],'value','666');

解释：

设置第一个schoolBag数组里的第三个bagData里的value为666

vue 异步修改data中的值不生效

在做vue项目的时候，由于用到了echart社区的官方图表，就小小的封装了一下，封装过后只需要传入一个数组数据就可以渲染出图表了，由于之前没有数据，我就在本地测试的时候传给了他一些默认数据，但是到后来对接接口的时候，这是数据是从后台哪里获取的，所以我需要从vue data中拿数据，然后传到函数中，问题就是出在这一步，你死活无法拿到vue data中更新后的值，你说气人不

这时会有人说，Vue是通过响应式系统修改，响应式系统会在初始化时对data进行监听，如果要修改data中的值，应该使用Vue提供的修改方法

this.$set(this.data, 'name', 'new value')

数组的话还可以这样修改

this.arr.splice(0,1,[])

不过你要知道该方法触发的时机，数据如果没有正确地绑定到模板中，那么即使使用了$set方法修改了data值，视图也不会发生变化。

你可以通过在模板中使用{{}}或v-bind绑定数据，这样以确保数据能正确地渲染到视图中。

才能准确地触发更新

相反如果数据没有进行绑定，你会发现不管你在哪里访问data,拿到的永远是之前的值

具体可以看下面这张图：

其实呢要解决这个问题也简单，你只需要在返回一个promise就可以了

下面是一些具体实现方法：

<script>
  export default {
    data() {
      return {
        arr:[
          [0,1,2,3],
          [1,2,3,4],
          [2,3,4,5],
        ]
      }
    },
      methods: {
        asyncfunc(){
           return new Promise((resolve, reject) => { 
              setTimeout(() => {
                this.$set(this.arr,0,[0,25])
                resolve()
              }, 5000);
            })
        }
      },
      mounted () {
        this.asyncfunc().then((result) => {
          console.log(this.arr[0],'值发生改变')
        })
      },
  }
</script>

这样你就可以拿到data中更新后的值啦！！！

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法，非常具有实用价值，需要的朋友可以参考下
2018-11-11
Vue 详解mixins混入用法大全
如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性，这时使用Vue mixins混入有很大好处，下面就介绍下Vue mixins混入使用方法，需要的朋友参考下吧
2021-08-08
Vue2响应式系统介绍
这篇文章主要介绍了Vue2响应式系统，响应式系统主要实现某个依赖了数据的函数，当所依赖的数据改变的时候，该函数要重新执行，下文更多相关介绍需要的小伙伴可以参考一下
2022-04-04
Vue组件选项props实例详解
父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props,需要的朋友可以参考下
2017-08-08
vue2滚动条加载更多数据实现代码
本篇文章主要介绍了vue2滚动条加载更多数据实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01
详解mpvue scroll-view自动回弹bug解决方案
设置了scroll-top的scroll-view组件，在组件所在vue实例data发生改变时会自动回弹到最上方，非常具有实用价值，需要的朋友可以参考下
2018-10-10
vue-admin-template 动态路由的实现示例
本文主要介绍了ue-admin-template动态路由的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-12-12
Nuxt项目支持eslint+pritter+typescript的实现
这篇文章主要介绍了Nuxt项目支持eslint+pritter+typescript的实现,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
VUE实现可随意拖动的弹窗组件
今天小编就为大家分享一篇VUE实现可随意拖动的弹窗组件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
VueX模块的具体使用(小白教程)
这篇文章主要介绍了VueX模块的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06