无法在组件中显示数据

Question

我有请求返回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>

Answer 1

尝试这样的事情：

<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>