使用axios发送请求获取数据给数组赋值

最新推荐文章于 2024-04-09 10:00:00 发布

NikoWord

最新推荐文章于 2024-04-09 10:00:00 发布

阅读量1.4k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/NikoChina/article/details/126823070

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 我们需要使用axios发送ajax请求 
        我们在created方法中调用加载数据的方法 -->
    
    <div id="app">
        <table>
            <tr v-for="user in userList">
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>
    

    </div>
       <!-- 导入vue文件 -->
    <script src="vue.min.js"></script>
       <!-- 导入axios文件 -->
    <script src="axios.min.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
               userList:[]
            },
            // 1、页面渲染之前执行的方法created
            created(){
                // 发送请求获取数据
                this.getMessage();
            },
            methods:{
                // 2、发送请求获取数据
                getMessage(){
                    // 出现了大bug 我们需要将vue中的this传递到axios中 避免和axios中的this发生冲突
                    let _this = this

                    // 向给定ID的用户发起请求
                    axios.get('user.json')
                    .then(function (response) {
                        // 处理成功情况
            // 3、将获取到的数据赋值给userList数组 要使用vue里面的this 这样才会正确给数组赋值
                        _this.userList = response.data.data.items;
                    })
                    .catch(function (error) {
                        // 处理错误情况
                        console.log(error);
                    });           
                }
            }
        })
    </script>
</body>

</html>