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"}]
}

点击还是可以调用的

methods中axios里的数据无法渲染到页面相关推荐

微信小程序渲染层错误：可以在AppData中获取到值但无法渲染到页面
微信小程序渲染层错误:可以在AppData中获取到值但无法渲染到页面 1.遇到的问题: 2.解释: 3.附上正确的完整代码: 在我跟着视频(bili:BV1nE41117BQ)P78 学做小程序的过程 ...
ajax获取数据后渲染到页面方法
$.ajax({url:"apiAttachmentAction_uploadAttachment.action", type:"post", data:for ...
el-table 大数据量渲染，页面卡顿的解决方案
原文: el-table大数据量渲染卡顿的解决方案描述: 当el-table的数据有成千上万条,且在同一页全部展示,此时页面渲染的dom太多可能造成页面卡顿原因: 因为数据量过多导致浏览器渲染过多 ...
【微信小程序】如何获取微信小程序云开发数据库的数据并渲染到页面？
前言上一篇博客我把微信小程序云开发数据库操作(增删改查)的实现方法都已经分享出来啦,可以戳链接进去阅读哦 [微信小程序]小程序云开发实现数据库增删改查(小白速度Get起来!!一步步教你如何实现) 基 ...
vue中拿到接口，并获取数据，渲染到页面
首先index.html完成的是单页面展示,app.vue里面已经写了视图出口, 例如;先新建一个role.vue页面,写上相应的布局和内容,然后在路由中添加这个页面. 然后开始写渲染数据的方法前提 ...
vue utils.js公共方法中axios请求返回数据
utils.js中 async getmaterialList() {try {const res = await axios.post('接口')return res.data.data} catc ...
微信小程序wx.request请求服务器json数据并渲染到页面
微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更新,而小程序数据主要是json数据格式,所以我们可以利用php操作数据库,把数据以json格式数据输出即可.现在给大家讲一下,微信小程序的wx ...
vue数据改变渲染问题_解决Vue中页面成功渲染数据undefined的问题
前言这个标题不太好取. 本文需要下面的知识:https://zhuanlan.zhihu.com/p/260811233zhuanlan.zhihu.com 问题描述我最近的一个功能需求是通过a ...
传输某条数据到另一个页面回填
开发工具与关键技术:VS中传输某条数据到另一个页面回填作者:木有窝的鸟~小通撰写时间:2019年5月25日在各种编程语言中,C#是其中的一门语言,而这一门语言能应用于软件编程,学习C#语言最主要 ...

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

结局

methods中axios里的数据无法渲染到页面相关推荐

最新文章

热门文章