vue 先请求api再进行插值，请求完成之前 插值报错

Question

代码如下：

<template>

    <div id="content">

        <header :style="'background:url('+message.image+') center /cover'">

            <p>{{message.title}}</p>

        </header>

        <div v-html="message.body"></div>

    </div>

</template>

<script>

export default {

    name: 'Contents',

    data () {

        return {

            message: null

        }

    },

    mounted: function () {

        this.axios({

            method: "get",

            url: "https://zhihu-daily.leanapp.cn/api/v1/contents/"+this.$store.state.id,

        })

        .then(e => {

            this.message = e.data.CONTENTS

            console.log(this.message)

            // 解决访问api图片403禁止访问问题  , 使用网站来处理给你返回的图片api地址

            if(this.message.image !== undefined){

                this.message.image = this.message.image.replace(/http\w{0,1}:\/\/p/g,'https://images.weserv.nl/?url=p') ;

            }

        })

        .catch(e => console.log(e));

        console.log(this.$store.state)

    }

}

</script>

页面会报错 Cannot read property 'image' of null"，所以请教一下如何进行改进？

Answer 1

data () {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; message: {image:""}&nbsp; &nbsp; }},