Vue.js 无法在组件中显示数据

我有一个返回json数据的请求……我试图在vue组件中显示该数据，但它不起作用。在console.log中一切正常..json类似于：

[{"id":1,"body":"Hello, this is my first notification","..bla bla

这是我的密码

<template>
    <div class="notification-container">
        <p>{{ notification }}</p>
    </div>
</template>

<script>
export default {

    data() {
        return {
            notification: '',
        }
    },

    mounted() {
        axios.get('/notifications').then((response) => {
            this.notification = response.data[0].body;
            console.log(this.notification);
        });
    }
}
</script>

---

试着这样做：

<template>
    <div class="notification-container">
        <p>{{ notification /* OR  this.notification[0].body */ }}</p>
    </div>
</template>

<script>
export default {

    data() {
        return {
            notification: '',
        }
    },

    methods:{
      showMsg(){
        axios.get('/notifications').then( response => {
            console.log(response);
            this.notification = response.data[0].body;
            /* OR this.notification = response; */
            console.log(this.notification);
        }).catch(e => {
            console.log(e)
        });
      }
    },

    created() { // or mounted()
        this.showMsg();
    }
}
</script>

---

无法看到此代码有任何错误。也许有更多的细节？控制台中有错误？很抱歉，最后似乎有点正确，但我不是这样做的，我使用方法来执行，并在已创建或任何vue状态下调用方法。控制台中正确显示了..in console.log。但是当我尝试array[]=response.data之类的方法，然后在组件“{array[0].body}”中显示错误[vue warn]：render中的错误：TypeError:无法读取undefineddo的属性你在你的vue.js应用程序中使用任何其他this.notification吗？不，只是这个..仍然是一样的..真的让人困惑，因为它应该可以正常工作，所以我认为您可以在组件之间共享一个数据名，在这种情况下，您应该使用语句数据方法尝试另一个数据名。。可以尝试在数据中获取整个响应，并在模板中而不是在axios函数中获取它