當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時間：2023/12/3 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 methods中axios里的数据无法渲染到页面小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

最近在研究axios聊天室室遇到一個問題
將axios獲取到的數(shù)據(jù)傳遞給data，從而改變頁面中的數(shù)值，但是結(jié)果令人失望

這是data里的數(shù)據(jù)

原想將data中的items數(shù)組換成axios里的response.data，后來發(fā)現(xiàn)items一直為空，就拿字符串做實驗了，里面放的123，
而在axios中

將items改成kkk

結(jié)局是：
在網(wǎng)頁中渲染的數(shù)據(jù)還是1232，

根本無法改變data中的數(shù)據(jù)。

而通過另一方面試驗，直接在methods中添加函數(shù)比如

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

這樣做卻是可以改變數(shù)據(jù)。

我想的是，axios是一個函數(shù)，內(nèi)部函數(shù)是無法改變外部的值的。

但是我又不能把axios放到mounted中，這樣我就不能通過
setInterval(“app.aaa()”, 1000);
來實現(xiàn)輪詢聊天了，所以必須找個辦法把值傳出去

結(jié)局

終于知道這個是緩存問題，瀏覽器只認第一個，，，必須采取一種手段欺騙瀏覽器
或者在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"}] }

點擊還是可以調(diào)用的

總結(jié)

以上是生活随笔為你收集整理的methods中axios里的数据无法渲染到页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： vue调用methods里的方法
下一篇： Js使滑轮到最底部