Vue不能检测数组或对象变动问题的解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
<style>
li:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li v-for="item,index in items" v-on:click="handle(index)">
<span>{{item.name}}</span>
<span>{{numbers[index]}}</span>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: ".wrap",
data: {
numbers: [],
items: [
{name: 'jjj'},
{name: 'kkk'},
{name: 'lll'},
]
},
methods: {
handle: function (index) {
// WHY: 更新数据，view层未渲染，但通过console这个数组可以发现数据确实更新了
if (typeof(this.numbers[index]) === "undefined" ) {
// 注：下面这么设置是可以的。例如
// var arr = [];
// arr[3]=3;
// console.log(arr) //[empty × 3, 3]
this.numbers[index] = ;
// this.numbers.splice(index,0,1) //用splice方法能同步显示，但得不到想要的效果
} else {
this.numbers[index]++;
// this.numbers.splice(index,1,this.numbers[index]++)
}
// console.log(this.numbers)
}
}
}); </script>
</body>
</html>
想实现的效果是点击 li 看 vm.nymbers[index] 是否存在，不存在设置为1，存在的话加1。
点击之后数字并没有在view层更新，而通过console打印发现数据更新了，只是view层没有及时的检测到。
再看一个栗子的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
<style>
li:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li v-for="item,index in items" v-on:click="handle(index)">
<span>{{item.name}}</span>
<!--<span>{{numbers[index]}}</span>-->
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: ".wrap",
data: {
// numbers: [],
items: [
{name: 'jjj'},
{name: 'kkk'},
{name: 'lll'},
]
},
methods: {
handle: function (index) {
// 不是数组，这里更新数据就可以直接在view层渲染
this.items[index].name += " success";
// console.log(this.numbers)
}
}
});
</script>
</body>
</html>
可以看到这里的view层能及时得到更新，但是到了数组哪里为什么就不可以了呢？
来看Vue2.0官方的文档说明：
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：
// Vue.set
Vue.set(example1.items, indexOfItem, newValue) // Array.prototype.splice
example1.items.splice(indexOfItem, , newValue)
你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名。
还有由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
var vm = new Vue({
data: {
a:
}
})
// `vm.a` 现在是响应式的
vm.b =
// `vm.b` 不是响应式的
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
//如果你想添加新的响应式属性应该这样做：
this.userProfile = Object.assign({}, this.userProfile, {
age: ,
favoriteColor: 'Vue Green'
})
Vue不能检测数组或对象变动问题的解决的更多相关文章
- vue 不能检测数组长度 值变化原因解析
1.vue不能检测数组长度或者值的变化 (1)数组长度变化 未检测到 <!DOCTYPE html> <html lang="en"> <head&g ...
- vue中改变数组或对象，页面没做出对应的渲染
原文链接 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sor ...
- 用VUE监听数组和对象的变化
看一下演示代码,先是增加数组和对象. <template> <div> <p>这是我定义的数组</p> <div>{{this.arr}}& ...
- Vue实现对数组、对象的深拷贝、复制
当组件间传递对象时,由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝),如下 数组: ,,]; var b = a; b.p ...
- vue的v-for数组和对象
v-for="(item,index) of hot" //数组遍历 v-for="(item,key,index) of cities" //对象遍历 //k ...
- vue中watch数组或者对象
1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console. ...
- 【VUE】vue中遍历数组和对象
一.遍历对象 对象数据 cities:{ "A":[{ "id": 56, "spell": "aba", " ...
- vue v-for的数组改变导致页面不渲染解决方法
直接在数组里,改变数组来达到重新渲染页面的目的, 需要用push等数组方法, 或者$set(),或者给数组重新赋值,来改变数组引用地址 而是直接索引= <body> <div id= ...
- 关于 vue 不能 watch 数组变化 和 对象变化的解决方案
原文地址:关于 vue 不能 watch 数组变化 和 对象变化的解决方案 vue 监听数组和对象的变化 vue 监听数组 vue 实际上可以监听数组变化,比如: data () { return { ...
随机推荐
- （转载）CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法
目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
- TiDB show processlist命令源码分析
背景 因为丰巢自去年年底开始在推送平台上尝试了TiDB,最近又要将承接丰巢所有交易的支付平台切到TiDB上.我本人一直没有抽出时间对TiDB的源码进行学习,最近准备开始一系列的学习和分享.由于我本人没 ...
- JAVA基础第二章-java三大特性：封装、继承、多态
业内经常说的一句话是不要重复造轮子,但是有时候,只有自己造一个轮子了,才会深刻明白什么样的轮子适合山路,什么样的轮子适合平地! 我将会持续更新java基础知识,欢迎关注. 往期章节: JAVA基础第一 ...
- 关于Node.js中的路径问题
在前端学习过程中,涉及到路径的问题非常多,相对路径,绝对路径等.有时候明明觉得没问题,但是还是会出错.或者说线下没问题,但是到了线上就出现问题,因此弄懂路径问题,非常关键.我们需要知道为什么这个地方既 ...
- css中margin为负数的深入研究
注:以下实验的元素均为块级元素,inline-block和inline本身对margin某些方向上都是无效的,所以这里不予讨论. margin-left或者margin-right为负数 当块元素wi ...
- mybatis小结
mybatis是Apache的一个开源项目ibatis,后由Google管理,目前在github上.MyBatis 是支持定制化SQL.存储过程以及高级映射的优秀的持久层框架. 一.mybatis解决 ...
- 史诗级Java资源大全中文版
本文来自GitHub 上 Awesome - java 系列的资源整理.awesome-java 就是 akullpp 发起维护的 Java 资源列表,内容包括:构建工具.数据库.框架.模板.安全.代 ...
- 适配器模式(Adapter Pattern)
适配器模式概述 定义:将一个类的接口转化成客户希望的另一个接口,适配器模式让那些接口不兼容的类可以一起工作.别名(包装器[Wrapper]模式) 它属于创建型模式的成员,何为创建型模式:就是关注如何将 ...
- Java面向接口编程，低耦合高内聚的设计哲学
接口体现的是一种规范和实现分离的设计哲学,充分利用接口可以极大的降低程序中各个模块之间的耦合,提高系统的可维护性以及可扩展性. 因此,很多的软件架构设计理念都倡导"面向接口编程"而 ...
- 浅谈CSS3 box-sizing 属性 有趣的盒模型
盒模型的组成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有两种标准的,一个是标准模型,一个是IE模型. 从上面两图不难看出在标准模型中,盒模型的宽高只是 ...