Vue中直接操作数组索引不奏效的问题解读
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
Vue操作数组索引不奏效
1.案例
我们首先创造一个数组hobby并展示
data:{
hobby:["抽烟" , "喝酒" , "烫头"]
}
<ul>
<li v-for="(item , index) in hobby">{{item}}</li>
</ul>
此时，我们在控制台操作修改该数组
vm.hobby[0] = "运动"
会发现此时数组确实已经修改，但页面内容并没有改变
2.解释
我们知道，Vue会对每一个data中的对象创建getter和setter方法，来实现响应式
我们查看此数组，发现并没有对每个数组元素的getter和setter方法的设置
此处为了方便理解，我们将该数组改为对象，对比一下
data: {
hobby: {
i1:"抽烟",
i2:"喝酒",
i3:"烫头"
}
}
很明显多了对于每一项的setter和getter方法的设置，这是响应式的关键
3.如何操作数组
一.push、pop、shift、unshift、reverse、sort、splice等可以直接修改数组本身的方法，可以做到响应式
vm.hobby.push('运动') //页面实时更新了
二.使用Vue.set()方法
以上两种方法都可以做到响应式
4.深层原因
这里沿用上例。
此处调用的操作数组的方法push，其实已经不是数组原型对象中的push了
Vue中存在的push，第一步先调用了Array原型对象的push，第二步重新解析模板，生成虚拟DOM
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()pop()shift()unshift()splice()sort()reverse()
以上为官方文档。
多看看文档总是会有收获的
更新数组或对象不生效
新增对象属性不生效
<body>
<div id="root">
<button @click="updateInfo">更新学生信息</button>
<div>姓名：{{student.name}}</div>
<div>年龄：{{student.age}}</div>
<div>性别：{{student.gender}}</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
data:{
student:{
name:"张三",
age:18
}
},
methods:{
updateInfo(){
this.student.gender = "男";
}
}
})
</script>
</body>
【问题描述】如上图所示，this.student.gender = “男”，新增对象属性不生效。
【解决方法】使用Vue.set(target,key,value)或者vm.$set(target,key,value)，如下图所示。
以下四个写法均可。
Vue.set(vm.student,“gender”,“男”) Vue.set(vm._data.student,“gender”,“男”) vm.$set(vm.student,“gender”,“男”) vm.$set(vm._data.student,“gender”,“男”)
所以，updateInfo函数可以改成这样：
<body>
<div id="root">
<button @click="updateInfo">更新学生信息</button>
<div>姓名：{{student.name}}</div>
<div>年龄：{{student.age}}</div>
<div v-if="student.gender">性别：{{student.gender}}</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
data:{
student:{
name:"张三",
age:18,
}
},
methods:{
updateInfo(){
// Vue.set(this.student,"gender","男");
this.$set(this.student,"gender","男");
}
}
})
</script>
</body>
更新数组元素不生效
<body>
<div id="root">
<button @click="updateInfo">更新马某梅的信息</button>
<ul>
<li v-for="(p,index) of persons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.gender}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
persons:[
{id:"001",name:"周冬雨",age:18,gender:"女"},
{id:"002",name:"马冬梅",age:19,gender:"女"},
{id:"003",name:"张桂梅",age:59,gender:"女"},
{id:"004",name:"周杰伦",age:30,gender:"男"}
]
},
methods:{
updateInfo(){
//更新 奏效
// this.persons[1].name = "马铁梅";
// this.persons[1].age = 25;
// this.persons[1].gender = "男";
//更新 不奏效
this.persons[1] = {
id:"002",
name:"马铁梅",
age:25,
gender:"男"
}
}
}
})
</script>
</body>
【问题描述】this.persons[1]={name:xxx,age:xxx,gender}，更新数组元素不生效。
【解决方法】有两种解决方法：
使用方法splice更新数组，如下所示。
this.persons.splice(1,1,{
id:"002",
name:"马铁梅",
age:25,
gender:"男"
})
使用Vue.set(target,key,value)或者vm.$set(target,key,value)。
this.$set(this.persons,1,{
id:"002",
name:"马铁梅",
age:25,
gender:"男"
})
//或者
Vue.set(this.persons,1,{
id:"002",
name:"马铁梅",
age:25,
gender:"男"
})
以上为个人经验，希望能给大家一个参考，也希望大家多多支持程序员之家。
相关文章
这篇文章主要介绍了7个实用的Vue开发技巧文。中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，下面我们来一起学习一下吧2019-05-05
nuxt.js服务端渲染中axios和proxy代理的配置操作
这篇文章主要介绍了nuxt.js服务端渲染中axios和proxy代理的配置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue中动态修改animation效果无效问题详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-06-06
Vue实现contenteditable元素双向绑定的方法详解
contenteditable是所有HTML元素都有的枚举属性，表示元素是否可以被用户编辑。本文将详细介绍如何实现contenteditable元素的双向绑定，需要的可以参考一下2022-05-05
这篇文章主要介绍了vue引用echarts饼图不显示图例的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
Vue重要修饰符.sync对比v-model的区别及使用详解
这篇文章主要为大家介绍了Vue中重要修饰符.sync与v-model的区别对比及使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了Vue重试机制示例，重试指的是当加载出错时，有能力重新发起加载组件的请求。异步组件加载失败后的重试机制，与请求服务端接口失败后的重试机制一样2023-01-01
这篇文章主要介绍了Vue.js之slot深度复制的相关资料，文中介绍的很详细，对大家具有一定的参考价值，需要的朋友们来一起看看吧。2017-03-03
这篇文章主要介绍了在Vant的基础上封装下拉日期控件的代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
最新评论