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 { ...
随机推荐
- timeCache.go
package blog4go import ( "sync" "time" ) const ( // PrefixTimeFormat 时间格式前缀 Pre ...
- Go 1.9 sync.Map揭秘
Go 1.9 sync.Map揭秘 目录 [−] 有并发问题的map Go 1.9之前的解决方案 sync.Map Load Store Delete Range sync.Map的性能 其它 在Go ...
- maintenance.go
package, && req.Alarm == pb.AlarmType_NONE { ar, err := m.AlarmList(ctx) if ...
- 读取一个txt文档中的内容
包含的头文件:#include <fstream> bool CMaked::ReadFileMake(CString filePath, CString &isChange) { ...
- cad二次开发--添加对象到模型空间中
通过实体名来将实体加入到模型空间 AcDbObjectId PostToModelSpace(AcDbEntity *pEnt){ //打开块表 AcDbBlockTable *pBlockTable ...
- Windows环境下消息中间件RabbitMq的搭建与应用
前言 消息中间件目前已经在很多大型的项目上得到了运用,我们常见的有 RabbitMq, activitymq,kafka,rocketmq,其中rocketmq是阿里自己在kafka的基础上用java ...
- python输出彩色字体
Python终端如何输出彩色字体 实现过程: 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关. 转义序列是以ESC开头,即用\033来完成(ES ...
- 《前端之路》之 JavaScript 高级技巧、高阶函数（一）
目录 一.高级函数 1-1 安全的类型检测 1-2 作用域安全的构造函数 1-3 惰性载入函数 1-4 函数绑定 1-5 函数柯里化 1-6 反函数柯里化 一.高级函数 1-1 安全的类型检测 想到类 ...
- Maven把项目依赖的所有jar包都打到同一个jar中
目录 1 使用maven-shade-plugin 2 推荐: 使用maven-assembly-plugin 3 扩展: Maven安装本地jar包到本地仓库 4 扩展: 手动生成jar包 5 扩展 ...
- 微信小程序 组件通信相关知识整理
1.自定义组件间通信与事件 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.htm ...