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? 实际场景: 更新数据之后,再设置滚动条的位置为什么设置无效? 为什么将隐藏的元素设置为显示状态之后,读取元素状态读取不到? 改变了对象/数组中的值,页面没 ...
随机推荐
- 论文阅读:Andromeda: Performance, Isolation, and Velocity at Scale in Cloud Network Virtualization (全文翻译用于资料整理和做PPT版本,之后会修改删除)
Abstract: This paper presents our design and experience with Andromeda, Google Cloud Platform’s net ...
- 更好的构建 Node 服务的工具
更好的构建 Node 服务的工具 无论前端项目在打包后都发送给后台, 有时候自己想看看效果在运行 npm run build 后只是看到一个 build 文件夹,但是直接打开是无法浏览,因此需要开启一 ...
- [THUSC2017]杜老师:bitset+线性基
算法一(50pts) 分析 有一个很显然的暴力做法,对于区间内的每个数开个bitset,然后暴力分解质因数.如果对于一个数,它的一个质因子的指数是奇数,那么就把bitset的对应位设成\(1\).答案 ...
- beforeRouterEnter与replace的使用
这次使用beforeRouterEnter来判断是一定条件下才执行相应的页面跳转. beforeRouterEnter:组件内路由,跟data,methods同级 beforeRouteEnter ( ...
- Java 使用反射给属性赋值
package com.nf147.manage.spring; import java.lang.reflect.Field; public class Cat { private String n ...
- 点云网格化算法---MPA
MPA网格化算法思路 第一步:初始化一个种子三角面.(随机选点,基于该点进行临近搜索到第二点:在基于该线段中点临近搜索到第三点) 图1 第二步:在种子三角面的基础上,进行面片的扩充,利用边的中点进行临 ...
- pyhton2与pyhton3切换
ubuntu中默认的Python版本是Python2.X,但是现在Python的最新版本是Python3.X. 那么怎么修改ubutun系统默认的Python解释器呢? 如果没有安装,则使用以下命令安 ...
- Hook CreateProcess
6种比较常用的运行(执行)程序的方法: 包括WinExec.ShellExecute.CreateProcess.CreateProcessAsUser.CreateProcessWithLogonW ...
- Eureka服务注册与发现-提供消费服务模型
1.工具及软件版本 JDK1.8 Spring Boot 1.4.3.RELEASE <parent> <groupId>org.springframework.boot< ...
- Octavia health-manager 与 amphora 故障修复的实现与分析
目录 文章目录 目录 Health Manager 监控 amphora 健康状态 故障转移 故障迁移测试 Health Manager Health Manager - This subcompon ...