填坑记1-数据渲染报错

今天遇到一个bug~

场景描述：点击页面的修改按钮，获取当前内容的详情信息。然后这个错误就出来了。Error in render: "TypeError: Cannot read property 'content' of undefined" 和 Cannot read property 'content' of undefined。
上代码：

<template>
    <el-form :model="form"
        ref="form"
        label-width="50px"
        size="mini">
        <!-- 内容 -->
        <el-form-item label="题干"
            class="form-item"
            prop="quTitle.content">
            <!-- 文字 -->
            <el-input type="textarea"
            v-model="form.quTitle.content"></el-input>
        </el-form-item>
    </el-form>
</template>
<script>
export default{
    data:()=>({
        form:{
            quTitle:{
                content:null
            }
        },
    }),
    created(){
        // 获取数据
        this.getForm()
        // 获取穿过来的值
        this.form = this.params
    },
    props:{
        // 穿过来的值
        params:{
            type:Object,
            default:()=>{}
        }
    }
    methods:{
        // 获取数据
        asynv getForm(){
            // 访问接口
            this.form = await this.axios('路径')
        }
    }
}
</script>

思路：

1. 第一开始，本人以为是content没有获取到问题，结果，打印了多个console,也没找出个所以然来。-放弃当前方案。
2. 然后，本人以为是没有实时更新导致的问题，结果，$set()写了，控制台依旧在报错。
3. 最后，我在created声明周期里面，打印了一个form，发现并没有值。

原因：

created声明周期是已经加载完了data和el，而我声明的form为空的object且模板渲染了完成了，并没有找到form里面的内容，所以，报错了。

解决办法：

我在渲染form的表单里面写了一个v-if，如果没有数据，不让组件显示，so，错误被完美解决了。

看代码：

<template>
    <el-form :model="form"
        v-if="Object.keys(form).length>0"
        ref="form"
        label-width="50px"
        size="mini">
        <!-- 内容 -->
        <el-form-item label="题干"
            class="form-item"
            prop="quTitle.content">
            <!-- 文字 -->
            <el-input type="textarea"
            v-model="form.quTitle.content"></el-input>
        </el-form-item>
    </el-form>
</template>
<script>
export default{
    data:()=>({
        form:{
            quTitle:{
                content:null
            }
        },
    }),
    created(){
        // 获取数据
        this.getForm()
        // 获取穿过来的值
        this.form = this.params
    },
    props:{
        // 穿过来的值
        params:{
            type:Object,
            default:()=>{}
        }
    }
    methods:{
        // 获取数据
        asynv getForm(){
            // 访问接口
            this.form = await this.axios('路径')
        }
    }
}
</script>

最后，大家如果有更好的方法，欢迎指出~