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

点击还是可以调用的

我yi癫狂

发布了171 篇原创文章 · 获赞 29 · 访问量 3万+

私信关注

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

结局

猜你喜欢