欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

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

发布时间：2023/12/3 编程问答 44 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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里的数据无法渲染到页面的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。