vue-axios的使用以及axios請求賦值為空的問題

更新時間：2025年04月18日 11:19:50 作者：大廠夢

這篇文章主要介紹了vue-axios的使用以及axios請求賦值為空的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue-axios的使用及axios請求賦值為空問題

注意：

如果沒有使用腳手架

需要命令導(dǎo)入axios

npm  install axios

注意：

如果沒有axios智能代碼提示

vscode 引入插件 axios Snippets

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="userList">
        <ul>
            <li v-for="(item, index) in users" >
                編號：{{item.id}} 姓名:{{item.name}} 號碼：{{item.number}}
            </li>
        </ul>


    </div>
    
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
<script>
    new Vue({
        el:'#userList',
        data: {
            users:[]
        },
        //mounted 鉤子函數(shù)，可在vue初始化之前加載
        mounted() {
            this.getUserList();
        },
        methods: {
            getUserList(){
                //axios 請求
                axios.get('http://127.0.0.1:8081/userList', {
                // params:{
                //     ID:123451
                // }
            })
            //為什么請求要在這里處理呢？翻看我前面的文章ES6新特
            .then(res => {
                console.log(res.data)
                this.users=res.data

            })
            .catch(err => {
                console.error(err); 
            })

            }
           
        },
    })
</script>

</html>

注意：

.then 如果使用箭頭函數(shù)

我們可以通過this.users 把獲取到的值賦予進去，否則只能如下：

let vm = new vue({})
vm.users = res.data

只能這樣哈~

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

如何在Vue中使localStorage具有響應(yīng)式(思想實驗)
這篇文章主要介紹了如何在Vue中使localStorage具有響應(yīng)式,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-07-07
淺談vue.watch的觸發(fā)條件是什么
這篇文章主要介紹了淺談vue.watch的觸發(fā)條件是什么？具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue使用JsonView進行JSON數(shù)據(jù)展示
Vue-JSON-Viewer 是一個用于在Vue項目中展示JSON數(shù)據(jù)的組件,它解決了在項目開發(fā)中面臨的展示JSON數(shù)據(jù)的需求,下面就跟隨小編一起來了解下它的具體使用吧
2025-03-03
Vue 單文件中的數(shù)據(jù)傳遞示例
本篇文章主要介紹了Vue 單文件中的數(shù)據(jù)傳遞示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
Vue.js slot插槽的作用域插槽用法詳解
這篇文章主要介紹了Vue.js slot插槽的作用域插槽用法詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
2021-09-09
在網(wǎng)上搜索了Vuejs2.0 動態(tài)級聯(lián)select許久未果，決定自己總結(jié)一下自己的經(jīng)驗，有關(guān)select在Vue.js 2.0版本中的應(yīng)用，需要的朋友可以參考下
2017-03-03