Vue中data不能检测数组

最新推荐文章于 2022-02-18 06:39:38 发布
最新推荐文章于 2022-02-18 06:39:38 发布
阅读量254 收藏
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GYF_123/article/details/114703009
版权 
data(){
	return(
		arr:['a','b','c']
	)
}

this.arr[1] = 'a1' // 不是响应式的，也就是不能改变
this.arr.length = 2 //不是响应式的


//解决方案：
//Vue.set(this.arr,1,a1)  

//第二种方案：
//this.arr.splice(newLength)
@gaoyanfeng
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript初步学习（4）
m0_51766302的博客
04-12 178
数组简介 数组和普通对象的区别：普通对象是使用字符串作为属性名的，而数组是使用数字来作为索引操作元素的 索引：从0开始的整数就是索引 数组的存储性能比普通对象要好，在开发中经常用数组来存储一些数据，使用typeof检查一个数组时，会返回object 语法:（向数组中添加元素） 数组[索引]=值 如果读取不存在的索引，则会返回undefined 对于连续的数组，使用length可以获取到数组的长度（元素的个数） 对于非连续的数组，使用length可以获取到数组的最大索引+1 尽量不要创建非连续的数组 修改l
Vue.js中数组变动的检测详解
11-25
前言 最近在尝试用Vue.js重构公司的现有业务代码，组件化的设计思路和MVVM的思想让我深深沉迷于其中。但是是踩到了不少坑，就比如这篇文章介绍的数组绑定后的更新检测。 相信大家都知道Observer，Watcher，vm 可谓 Vue 中比较重要的部分，检测数据变动后视图更新的重要环节。在 vue.js中$watch的用法示例 中，我们讨论了如何实现基本的 watch 。 接下来，我们来看看如何实现数组变动检测。 例子: // 创建 vm let vm = new Vue({ data: { a: [{}, {}, {}] } }) // 键路径 vm.$watch('a', fun
解决Vue不能检测数组或对象变动的问题
12-29
来看一个实例： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>vue</title> [removed][removed] <style> li:hover { cursor: pointer; } </style> </head> <body> <div class=wrap> <ul> <li v-for=item,index in items v-on:click=ha
Vue不能检测到Object/Array更新的情况的解决
12-10
前言 看文档不认真，开发也没有多注意，总是hack。忽悠忽悠就过去，但怎么说，歪门邪道还是不太好，现在就亡羊补牢，总结总结。 数组 索引 使用下标更新数组元素； 使用赋值方式改变数组长度； 使用下标增删数组元素； 正文 使用下标更新数组元素 data: { arrs: [0, 1, 2, 3] } 直接使用this.arrs[0] = 'zero';虽然数组确实是被更新了，但是更新不会被渲染到视图（html页面）上。因为Vue没有检测到数组的更新。 由于 JavaScript 的限制，Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如：vm.it
vue检测对象和数组的变化分析
01-19
在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。可以直接在子组件修改对象或数组，但是并不会数据改变就会引起变化。 检测对象变化 1、不能检测到对象属性的添加或删除 var vm = new Vue({ data:{ data111:{ a = 1 } } }) data111.a = 2;//这个可以引起变化 但data111.b = 2；和vm.b = 2这个不能检测到变化 需要用 Vue.set(object, key, value) 比如$set(data1
Vue的双向数据绑定原理
七小天的博客
06-21 502
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。 具体步骤： 第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter 这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化 第二步： compile(模板解析器)解析模板指令，将模板中的变量替换成数据，
vue循环获取数组的坑---echars传数据
qq_49327308的博客
03-04 482
vue循环获取数组的坑—echars传数据 当我在data里边定义一个空数组，然后通过for循环的方法向数组中push元素时可以添加进去的，但是当我去通过下标取数组的值，就会发现取出来的是undefined,就是没法取到值，当时也给我整懵了，找了很久，硬是没整出来。最后我直接在方法里面创建一个数组，再去push，就好了，贴上代码： method.findCtemperature().then((res) => { console.log(res); let num =
Vue2.x原理-为什么data中返回数组会报错？
ZHgogogoha的博客
08-16 778
Vue-observer 先来看一段代码 <div id="container"> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el: '#container', data() { return [1, 2] } }) </s
Vue2|为什么vue组件中的data是函数而不是对象？
weixin_62395055的博客
02-18 2016
初学vue的小伙伴可能会感到疑惑，为什么在vue实例中存取变量的data是一个对象，而组件中的data不是一个对象而是一个函数？ 我们先来看这个例子 function foo() { return { name: 'sherry', age: 18 } } let obj1 = foo() let obj2 = foo() let obj3 = foo() obj1.n...
vue对data中的数组操作时出现错误渲染的情况
Hey_JC的博客
11-20 1413
vue当中对于数组元素不仅要用push、splice等方法进行修改，而且修改前后对象的属性必须完全一致（不能少了一个属性或者多了一个属性）否则会导致数据错误的渲染（错误渲染的情况不知道是elementUI的组件问题还是vue本身是这么限定的）但以后进行数组操作的时候，还是遵守这个规范比较好。 //源数据： let data = { id:1, service_id:2, c...
vue 修改 data 数据问题并实时显示操作
11-19
补充知识：vue data中数组以及对象 属性改变时不能及时反馈到视图中问题的解决方式 1.vue 对数组更新检测 的机制又很明确的说明： 变异方法：Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。 这些...
Vue中数组索引项、对象属性增删无法触发更新检测
weixin_37575889的博客
12-29 749
对于初级前端程序员来说，原生js基础不扎实，在敏捷开发追求效率的情况下，快速使用框架会极其容易忽视一些小的却非常关键的知识点，比如我们今天要看的《Vue中数组索引项、对象属性增删无法触发更新检测》，再比如这个前端程序员就是我…… 当你在用Vue开发的时候，你可能不经常，只是偶尔地遇到，“哎？我明明把异步数据赋值给我定义的数组变量或者对象变量了，为什么页面上数据还是老旧的并没有改变呢？”，这时候你可...
【vue开发问题-解决方法】（七）Vue不能检测到对象属性添加或删除 ，vue不能检测到数组的变动问题
weixin_46020146的博客
09-30 70
【vue开发问题-解决方法】（七）Vue不能检测到对象属性添加或删除 ，vue不能检测到数组的变动问题
vue检测不到data里数组里面元素的变化
weixin_45766034的博客
10-14 748
当前遇到的问题是： 当我们改变data中数组里面是某一个元素，视图不进行更新 带着解决这个问题，我们首先来到了vue官方文档： 当使用上面的方法对数组进行操作的时候，就会触发视图更新 但是现在问题假如我们并不是用这些方法对数组进行操作 例如： data(){ return{ arr:[1,2,3] } } ... this.arr[0] = 10 那么我们就要深入vue的响应式原理了 当我们在data选项中添加一些对象时 2 我们可以观察到 vue 将对象里的每
关于将多个json对象添加到数组中的测试
weixin_30690833的博客
05-02 320
如果用数组push添加不到数组中的，这个我也不知道是为什么?然后我选择了另一种发放就是从数组出发，逆向添加 最后的数组是这样的： data1=['公司1','公司2','公司3','公司4']; arrVal=[355,310,520,260]; data2=[{value:335, name:'公司1'},{value:310, name:'公司2'},{value:234...
对vue中的data数据中的数组更新的一些方法
xiamoziqian的博客
06-27 1万+
vue中，经常要对数组进行一些操作，比如删除某个数据，添加一个数据等。拿下面的例子举例： <div id="app"> <ul> <li v-for="(item,index) in list" :key="item.id">{{item}}---{{index}}</li> </ul&g...
Vue 修改data中的数组和对象，DOM却不刷新
热门推荐
a303944689的博客
08-03 1万+
问题如题。看了官方文档。 给出了这样的解释。 由于 JavaScript 的限制，Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 举个例子： var vm = new Vue({ data: { item...
关于vue数组不能赋值的深入思考
m0_50853977的博客
12-10 3345
关于vue数组不能赋值的深入思考 前提： 因为想对数组进行一些新增的操作，在属性上直接赋值，预示有了这样的代码 vm.items[indexOfItem] = newValue，但页面上并没有展示我想要的数据。 探索历程： 1、’在vue官方文档中，发现 官方的原文：由于 JavaScript 的限制， Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如： vm.items.length =
我指的是怎么在vue的data中表达这个数组
最新发布
06-08
如果你想在 Vue 的 `data` 中表达一个数组，你可以将其定义为一个数组字面量或者使用 `new Array()` 构造函数进行初始化。例如，如果你的数组包含三个元素，你可以这样定义： ``` data() { return { src: { cec: ['part1', 'part2', 'part3'] } } } ``` 这将在 `data` 中定义一个 `src` 对象，其中包含一个名为 `cec` 的数组，数组中包含三个字符串元素。 你也可以使用 `new Array()` 构造函数来定义数组。例如： ``` data() { return { src: { cec: new Array('part1', 'part2', 'part3') } } } ``` 这将创建一个包含三个字符串元素的数组，并将其存储在 `src` 对象的 `cec` 属性中。 需要注意的是，如果你想在 Vue 中动态修改数组，你需要使用 Vue 提供的数组变异方法，例如 `push()`、`pop()`、`shift()`、`unshift()`、`splice()` 等。这样才能确保 Vue 能够检测到数组的变化并及时更新视图。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值