vue data数据变化 页面数据不更新问题
问题:
<template>
<div class="container">
<div v-for="(item, index) in arrList" :key="index">
<span>{{ item.name }}-{{ item.age }}-{{ item.score }}</span>
</div>
</div>
</template> <script>
export default {
data () {
return {
arrList: []
}
},
created() {
this.arrList = [
{
name: '小明',
age: '20',
},
{
name: '李华',
age: '18'
}
]
this.getScore()
},
methods: {
getScore() {
let that = this
setTimeout(() => {
let res = [[59,59,59], [60,60,60]]
res.forEach((item, index) => {
that.arrList[index].score = item
})
}, 1000)
}
}
}
</script>
页面显示:

解决办法: 使用this.$set()
methods: {
getScore() {
let that = this
setTimeout(() => {
let res = [[59,59,59], [60,60,60]]
res.forEach((item, index) => {
// that.arrList[index].score = item
// 下面两种方法都可以
// 1、使用this.$set()修改数据
let arr = that.arrList[index]
arr.score = item
that.$set(that.arrList, that.arrList[index], arr)
// 2、使用this.$set()添加数据
that.$set(that.arrList[index], 'score', item)
})
}, 1000)
}
}
根据官方的文档,使用数组的API是可以直接触发页面更新的

vue data数据变化 页面数据不更新问题的更多相关文章
- vue数组中数据变化但是视图没有更新解决方案
原文链接:http://www.cnblogs.com/sufubo/p/6906261.html#undefined 问题:在vue项目中,我更改数组中的某一条数据,直接arr[i]=newVal ...
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
- vue地址栏发生变化但是页面不会更新怎么办
话不多说直接上问题,主要是在使用router-link进行页面跳转时,使用query进行地址栏传输数据,发现当点击跳转一次之后再次点击虽然地址栏上问号后面的数据会改变,但是页面并不会更新,导致页面永远 ...
- VUE 路由变化页面数据不刷新问题
出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个文章页面并不会运行created组件生命周期,导致 ...
- vue 路由变化页面数据不刷新问题(缓存)
每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. ...
- vue ,v-for循环对象,不是深度克隆? 数据改变了但是页面元素没有更新。问题解决
<div id="app"> <ul > <li v-for="(val,key,idx) in list" > {{key ...
- vue对象数组数据变化,页面不渲染
很多时候,我们习惯于这样操作数组和对象: data() { // data数据 return { arr: [1,2,3], obj:{ a: 1, b: 2 } }; }, // 数据更新 数组视图 ...
- vue 深度响应初步了解(检测data对象数据变化)
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为 getter/se ...
- problem:vue之数据变更没有触发视图更新问题
前言: 数据变更之后,vue如何渲染dom? 实际场景: 更新数据之后,再设置滚动条的位置为什么设置无效? 为什么将隐藏的元素设置为显示状态之后,读取元素状态读取不到? 改变了对象/数组中的值,页面没 ...
随机推荐
- 如何将python源文件打包成exe文件
PyInstaller是一个十分有用的第三方库,它能够在Windows.Linux.Mac OS X 等操作系统下将 Python 源文件打包,通过对源文件打包,Python 程序可以在没有安装 Py ...
- Web Api试图加载格式不正确的程序,解决方法
Web Api试图加载格式不正确的程序,错误如下: 问题原因: 出现上述问题的原因是,所加载的程序集中有32位的,也有64位的,IIS 7 程序池 在Windows下.Net FrameWork是64 ...
- npm安装源修改为淘宝源
npm安装源修改为淘宝源 标签(空格分隔): 编译 原:https://cnodejs.org/topic/4f9904f9407edba21468f31e npm安装源修改为淘宝源 镜像使用方法(三 ...
- android 3.0 ationbar使用总结
1,ationbar的基本讲解 http://www.apkbus.com/forum.php?mod=viewthread&tid=125536 仅仅需要根据需求写出一个menu资源文件 2 ...
- maven使用常见问题
1.我写的是src/main/java/config/mybatis-cofig.xml 但总是报错 Could not find resource src/main/java/config/myba ...
- php缓冲区
我理解的要点: 1.所有缓冲区控制是在一个PHP执行进程中发生的.如:你打开n个demo.php,他们之间开启和关闭缓冲是互不影响的. 2.output_buffering在程序中用ini_set是不 ...
- FreeBSD上安装Cassandra 3.10
哈哈,你居然点进来了,来吧,一起吐槽FreeBSD啊,装了一上午Cassandra 3.10都没有装成功, 终于,鄙人一条 shutdown -p now 结束了FreeBSD,默默打开了CentOS ...
- lua源码学习篇二:语法分析
一步步调试,在lparser.c文件中luaY_parser函数是语法分析的重点函数,词法分析也是在这个过程中调用的.在这个过程中,用到一些数据结构,下面会详细说. Proto *luaY_parse ...
- ARTS-2
ARTS的初衷 Algorithm:主要是为了编程训练和学习.每周至少做一个 leetcode 的算法题(先从Easy开始,然后再Medium,最后才Hard).进行编程训练,如果不训练你看再多的算法 ...
- 阿里云 Centos7 部署 Django 项目
前期准备 阿里云服务器 mysql数据库 已经本地运行成功的项目 阿里云服务器的环境配置 Git #代码管理 Gitlab #代码托管,要求服务器内存不低于2G,我选择放弃 Mysql #连接数据库 ...