methods中axios里的数据无法渲染到页面

最近在研究axios聊天室室遇到一个问题
将axios获取到的数据传递给data,从而改变页面中的数值,但是结果令人失望

这是data里的数据
在这里插入图片描述
原想将data中的items数组换成axios里的response.data,后来发现items一直为空,就拿字符串做实验了,里面放的123,
而在axios中
在这里插入图片描述
将items改成kkk

结局是:
在网页中渲染的数据还是1232,
在这里插入图片描述
在这里插入图片描述
根本无法改变data中的数据。

而通过另一方面试验,直接在methods中添加函数比如

ccc:function(){this.items = "kkkk";}

这样做却是可以改变数据。

我想的是,axios是一个函数,内部函数是无法改变外部的值的。

但是我又不能把axios放到mounted中,这样我就不能通过
setInterval(“app.aaa()”, 1000);
来实现轮询聊天了,所以必须找个办法把值传出去

结局

终于知道这个是缓存问题,浏览器只认第一个,,,必须采取一种手段欺骗浏览器
或者在reciever.php后面加一个?t=time,一直在变化的时间
但我试了还是不行

附一段代码
index.html

<!DOCTYPE html>
<html lang="en"><head><title></title><meta charset="UTF-8"></head><body><div id="app"><button @click="fn">1111</button>{{msg}}</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>let vm = new Vue({el: '#app',data:{msg:''},methods:{fn(){axios.get('data.json').then(res=>{console.log(res);this.msg=res.data.data})}}})// axios.get('./data.json')//     .then(res=>{//         console.log(res.data.data)//     })//     .catch(err=>{//         console.log(err)//     })// axios({//     url:'./data.json',//     method:'get'// }).then(res=>{//     console.log(res)// }).catch(err=>{//     console.log(err)// })</script></body>
</html>

data.json

{"meta": {"msg": "提示信息","status": 200},"data": [{"id": 1, "title": "test1"},{"id": 2, "title": "test2"},{"id": 3, "title": "test3"},{"id": 4, "title": "test4"}]
}

点击还是可以调用的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/323001.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jzoj4229-学习神技【逆元,费马小定理】

正题 题目大意 求 (∑i1na∗qi)mod(1097)(\sum_{i1}^na*q^i)\ mod\ (10^97)(i1∑n​a∗qi) mod (1097) 解题思路 题目里都给出公式 ∑i1na∗qia∗(1−qn)1−q\sum_{i1}^na*q_i\frac{a*(1-q^n)}{1-q}i1∑n​a∗qi​1−qa∗(1−qn)​ 其实就是 a∗(qn−1)q−1\frac{a*(q^n-1)}{…

.NET Core跨平台的奥秘[上篇]:历史的枷锁

微软推出的第一个版本的.NET Framework是一个面向Windows桌面和服务器的基础框架&#xff0c;在此之后&#xff0c;为此微软根据设备自身的需求对.NET Framework进行裁剪&#xff0c;不断推出了针对具体设备类型的.NET Framework版本以实现针对移动、平板和嵌入式设备提供支持。…

Hadoop入门(十)Mapreduce高级shuffle之Sort和Group

一、排序分组概述 MapReduce中排序和分组在哪里被执行 第3步中需要对不同分区中的数据进行排序和分组&#xff0c;默认情况按照key进行排序和分组 二、排序 在Hadoop默认的排序算法中&#xff0c;只会针对key值进行排序 任务&#xff1a; 数据文件中&#xff0c;如果按照第一…

Js使滑轮到最底部

在做ajax的聊天室页面时&#xff0c;新数据总是不能显示出来&#xff0c;需要下翻&#xff0c;所以必须在setInterval(“app.aaa()”, 1000)中aaa函数里添加一个可以使滑轮在底部的代码 加入 div1 document.getElementById("div1") div1.scrollTop div1.scrollHe…

jzoj4230-淬炼神体【0/1分数规划】

正题 题目大意 nnn个东西&#xff0c;有ai,bia_i,b_iai​,bi​。选择kkk个&#xff0c;使得∑ai/∑bi\sum a_i/\sum b_i∑ai​/∑bi​最大。 解题思路 ∑ai/∑bik\sum a_i/\sum b_ik∑ai​/∑bi​k ∑ai/∑bi/k1\sum a_i/\sum b_i/k1∑ai​/∑bi​/k1 ∑ai/k∑bi\sum a_i/k\sum…

使用Identity Server 4建立Authorization Server (3)

预备知识: 学习Identity Server 4的预备知识 第一部分: 使用Identity Server 4建立Authorization Server (1) 第二部分: 使用Identity Server 4建立Authorization Server (2) 上一部分简单的弄了个web api 并通过Client_Credentials和ResourceOwnerPassword两种方式获取token然…

php接口跨域问题

报错是因为接口跨域&#xff0c;不允许访问 只需在php头部加入此行代码就行了 header(Access-Control-Allow-Origin:*);

jzoj4231-寻找神格【线段树,数学】

正题 题目大意 4个操作 单点修改&#xff0c;区间修改&#xff0c;区间求和&#xff0c;区间求方差 方差为:∑(xi−ave)2n\frac{\sum(x_i-ave)^2}{n}n∑(xi​−ave)2​ aveaveave为平均值 解题思路 我们将方差的式子分解一下 ∑(xi−ave)2n\frac{\sum(x_i-ave)^2}{n}n∑(xi​…

Hadoop入门(十四)Mapreduce的数据去重程序

1 实例描述 对数据文件中的数据进行去重。数据文件中的每行都是一个数据 样例输入如下所示&#xff1a; 1&#xff09;file1 2012-3-1 a 2012-3-2 b 2012-3-3 c 2012-3-4 d 2012-3-5 a 2012-3-6 b 2012-3-7 c 2012-3-3 c 2&#xff09;file2 2012-3-1 b 2012-3-2 a 2012…

spring boot输出hello world几种方法

1、手动配置&#xff0c;三个文件 打开创建maven,创建这三个文件从上到下依次复制即可 配置文件&#xff08;重要&#xff09;&#xff08;否则后面会报错&#xff09; pom.xml <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w…

欢乐纪中某B组赛【2019.1.20】

前言 有回来做BBB组了&#xff0c;话说第3道题就是AAA组第一道。 成绩 RankRankRank是有算别人的 今天XJQXJQXJQ不在 RankRankRankPersonPersonPersonScoreScoreScoreAAABBBCCC1112017wyc2017wyc2017wyc2702702701001001001001001007070701010102017hjq2017hjq2017hjq13013013…

向ASP.NET Core迁移

我们首先来看看ASP.NET Core有哪些优势&#xff1f; 跨平台&#xff1a;可以部署到Linux服务器上 内置一套对云和部署环境非常友好的配置模块 内置依赖注入 IIS或者Kestrel&#xff08;或者其它自定义&#xff09; 轻量级、高性能、模块化的Http处理管线 .NET Core 是开源…

Hadoop入门(十五)Mapreduce的数据排序程序

"数据排序"是许多实际任务执行时要完成的第一项工作&#xff0c;比如学生成绩评比、数据建立索引等。这个实例和数据去重类似&#xff0c;都是先对原始数据进行初步处理&#xff0c;为进一步的数据操作打好基础 1 实例描述 对输入文件中数据进行排序。输入文件中的…

Java我来了

引言 原本我也是个计算机的小白&#xff0c;从今年的二月份开始学习java&#xff0c;接触eclipse&#xff0c;终于算是开启了我的编程之旅。 在此之前我也不算是零基础&#xff0c;学校在上学期还未开设c语言课程的时候&#xff0c;我就自学了c语言&#xff0c;学的不深&#x…

jzoj4208-线段树什么的最讨厌了【dfs】

正题 题目大意 一个0∼n0\sim n0∼n的线段树包含l∼rl\sim rl∼r的区间&#xff0c;求最小的nnn 解题思路 dfsdfsdfs一下&#xff0c;从下面开始往上扩展区间&#xff0c;知道变成0∼x0\sim x0∼x的格式就就可以去最小值了。 记得剪枝 codecodecode #include<cstdio> …

Hadoop入门(十六)Mapreduce的单表关联程序

"单表关联"要求从给出的数据中寻找所关心的数据&#xff0c;它是对原始数据所包含信息的挖掘 1 实例描述 给出child-parent&#xff08;孩子——父母&#xff09;表&#xff0c;要求输出grandchild-grandparent&#xff08;孙子——祖父母&#xff09;表 样例输入&…

ASP.NET Core集成现有系统认证

我们现在大多数转向ASP.NET Core来使用开发的团队&#xff0c;应该都不是从0开始搭建系统&#xff0c;而是老的业务系统已经在运行&#xff0c;ASP.NET Core用来开发新模块。那么解决用户认证的问题&#xff0c;成为我们的第一个拦路虎。 认证与授权 什么是认证&#xff1f; …

Hadoop入门(十七)Mapreduce的多表关联程序

多表关联和单表关联类似&#xff0c;它也是通过对原始数据进行一定的处理&#xff0c;从其中挖掘出关心的信息 1 实例描述 输入是两个文件&#xff0c;一个代表工厂表&#xff0c;包含工厂名列和地址编号列&#xff1b;另一个代表地址表&#xff0c;包含地址名列和地址编号列…

jzoj4209-已经没有什么好害怕的了【差分】

正题 题目大意 ansians_iansi​表示包含字符iii的括号匹配子串个数 求∑i1n(ansi∗imod&ThinSpace;&ThinSpace;(1e97))\sum_{i1}^n(ans_i*i\mod (1e97))i1∑n​(ansi​∗imod(1e97)) 解题思路 计算出每个匹配括号的前一个括号位置和后一个括号位置。 一个差分数组 先…

使用Identity Server 4建立Authorization Server (4)

预备知识: 学习Identity Server 4的预备知识 第一部分: 使用Identity Server 4建立Authorization Server (1) 第二部分: 使用Identity Server 4建立Authorization Server (2) 第三部分: 使用Identity Server 4建立Authorization Server (3) 上一篇讲了使用OpenId Connect进行Au…