为什么 vue 组件说数据中没有变量？

Question

这是我的 Axios 组件

<template>
    <div>
        <div class="comment">
            <div class="body">
                <p>{{fulluser.name}}</p>
            </div>

            <img class="image" :src="userimg" alt="" width="50px" height="50px">
        </div>

    </div>
</template>

<script>
    import axiosRetry from 'axios-retry';
    export default {
        name: "commentcomponent",
        props:
        [
            "comment"
        ],
        data()
        {
            return{
                fulluser:null
            }
        },
        computed:
            {
                userimg()
                {
                    return "/images/"+this.fulluser.image;
                }
            },
        created() {
            // axiosRetry(axios, { retries: 5 });
            axios.get("/comment/userimage/"+this.comment.id)
                .then(res=>
                {
                    this.fulluser=res.data;
                    console.log(this.fulluser.id)

                })
        },
        methods:
            {
                userimg()
                {
                    return "/images/"+this.fulluser.image;
                }
            }
    }
</script>

当我打开浏览器时它可以正常工作，但是当我检查它时给我这个错误

• app.js:44975 [Vue 警告]：渲染错误：“TypeError：无法读取属性‘name’ of null”

但它可以在浏览器中运行，它会为我提供所有图像和名称

我该如何解决这个问题？

Answer 1

调用axios 是异步的。这意味着组件在初始化 fulluser 值之前被渲染。 所以你需要考虑fulluser 何时为空，即使它可能是很短的时间。

<p>{{fulluser && fulluser.name || ''}}</p>

或者

data()
{
   return{
      fulluser: {
         name: ''
      }
   }
},