关于vue.js:使用vue的过程中修复我自己挖的坑

6次阅读

共计 998 个字符,预计需要花费 3 分钟才能阅读完成。

明天遇到一个 bug~

场景形容:点击页面的批改按钮,获取以后内容的详情信息。而后这个谬误就进去了。Error in render: “TypeError: Cannot read property ‘content’ of undefined” 和 Cannot read property ‘content’ of undefined。
上代码:

`

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

`
思路:

1. 第一开始,自己认为是 content 没有获取到问题,后果,打印了多个 console, 也没找出个所以然来。- 放弃以后计划。2. 而后,自己认为是没有实时更新导致的问题,后果,$set() 写了,控制台仍旧在报错。3. 最初,我在 created 申明周期外面,打印了一个 form,发现并没有值。

起因:

created 申明周期是曾经加载完了 data 和 el,而我申明的 form 为空的 object 且模板渲染了实现了,并没有找到 form 外面的内容,所以,报错了。

解决办法:

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

最初,大家如果有更好的办法,欢送指出~

正文完
 0