axios获取的数据怎么渲染到页面？为什么我的这个没用

来源：3-1 准备工作说明

毛Bing

2018-12-08

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../style/compStyle/index.css">
</head>
<body>
    <div id="app">
        <div class="header">
            <h1>{{message}}</h1>
        </div>
        <ul>
            <li v-model="todos" v-for="item in todos" :key="item">{{item.name}}</li>
        </ul>
        <li @click="getAxios">
            Axios
        </li>
    </div>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script src="../node_modules/axios/dist/axios.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '哈哈哈',
                todos:[]
            },
            methods:{
                getAxios(){
                    if(axios){
                        console.log('Axios')
                        axios.get('./app.json')
                        .then((res)=> this.getDate(res))
                        .catch(function (error) {
                            console.log(error)
                        })
                    }else{
                        console.log('无')
                    }
                },
                getDate(res){
                    console.log(res)
                    res = res.data
                    if (res.ret && res.data) {
                        const data = res.data
                        this.todos = data.todos
                    }
                }
            },
            mounted(){
                this.getAxios()
            }
        })
    </script>
</body>
</html>

下面这个是json数据

{
    "todos":[
        {
            "name": "Vue",
            "sex" : "M",
            "age" : "5"
        },
        {
            "name": "React",
            "sex" : "W",
            "age" : "10"
        }
    ]
}

写回答

1回答