• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

    vue-axios的使用以及axios请求赋值为空的问题

    发布者: 404号房间 | 发布时间: 2025-6-14 15:30| 查看数: 39| 评论数: 0|帖子模式

    vue-axios的使用及axios请求赋值为空问题

    注意：

    如果没有使用脚手架

    需要命令导入axios
    1. npm  install axios
    复制代码
    注意：

    如果没有axios智能代码提示

    vscode 引入插件 axios Snippets
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8. </head>
    9. <body>
    10.     <div id="userList">
    11.         <ul>
    12.             <li v-for="(item, index) in users" >
    13.                 编号：{{item.id}} 姓名:{{item.name}} 号码：{{item.number}}
    14.             </li>
    15.         </ul>


    18.     </div>
    19.    
    20. </body>
    21. <script src="./node_modules/vue/dist/vue.js"></script>
    22. <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    23. <script src="./node_modules/axios/dist/axios.js"></script>
    24. <script>
    25.     new Vue({
    26.         el:'#userList',
    27.         data: {
    28.             users:[]
    29.         },
    30.         //mounted 钩子函数，可在vue初始化之前加载
    31.         mounted() {
    32.             this.getUserList();
    33.         },
    34.         methods: {
    35.             getUserList(){
    36.                 //axios 请求
    37.                 axios.get('http://127.0.0.1:8081/userList', {
    38.                 // params:{
    39.                 //     ID:123451
    40.                 // }
    41.             })
    42.             //为什么请求要在这里处理呢？翻看我前面的文章ES6新特
    43.             .then(res => {
    44.                 console.log(res.data)
    45.                 this.users=res.data

    47.             })
    48.             .catch(err => {
    49.                 console.error(err);
    50.             })

    52.             }
    53.            
    54.         },
    55.     })
    56. </script>

    58. </html>
    复制代码
    注意：

    .then 如果使用箭头函数

    我们可以通过this.users 把获取到的值 赋予进去，否则只能如下：
    1. let vm = new vue({})
    2. vm.users = res.data
    复制代码
    只能这样哈~

    总结

    以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

    来源：https://www.jb51.net/javascript/339901zyf.htm
    免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

    最新评论

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表