我又来提问了 关于axios的

Question

源代码

<template>
    <div class="header">
        <div v-for="(val,index) in list" :key="index">
            <ul>
                <li>{{val.name}}</li>
                <li></li>
            </ul>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        name: "axiso",
        data() {
            return {
                list: [],
            }

        },
        mounted() {
            this.getJson()
            console.log(this.list)
        },
        methods: {
            getJson() {
                console.log(this)
                const url = "http://localhost:8080/api"
                axios.get(url).then(res => {
                    this.list = res.data
                    console.log(this.list, '------');
                });
            },
        }
    }
</script>
<style>
</style>

也能获取到数据，但是就是不能渲染到页面里

Answer 1

VUE直接数组赋值是不会触发试图更新的，把数据push到list里才能触发试图更新。

Answer 2

你没有用es6的写法，这里边你用this是指向不到你的data里定义的内容的。
你在axios外加上 let that = this；试一试，看看行不行。

Answer 3

接口返回的JSON格式不对

Answer 4

看你的截图，console.log打印的this.list 是{{'id':1,'name':''}，{}，{}，} ,这好像格式不对啊。。。

正常的json格式数据打印出来是这样子的：

试试转换下数据格式let data = JSON.parse(res.data)，或者让给后端给正确的json格式的数据。

Answer 5

使用JSON.parse()把json字符串转换为json对象

axios({
    url: url,
    method: 'get'
}).then( res => {
    let data = JSON.parse(res.data)
    this.list = data
})

Answer 6

你的这个list格式有问题吧，不是一个数组。所以循环不出来。