vue的v-model绑定不了json对象的第二层？

Question

问题描述

有个表单，想用v-model绑定一个json对象下面的json，但是发现直接报错了

问题出现的环境背景及自己尝试过哪些方法

相关代码

 obj: {
          task:{
            endTime:this.time[1], //结束时间
            name:'',   //名称
            passMark:'',  //合格分数
            startTime:this.time[0], //开始时间
            totalCore:'',//总分
            createPracticeType: '1',//1 自动抽题 2 手动抽题
            status: '',// 1 正常 2 停用

          },
          ids: '', //用户id
          practiceIds: '',//题目id
          rule: []  //题目
        },

下面这样用

         <el-form :model="obj.task">
                  <el-form-item label="出题方式：">
                    <el-radio v-model="obj.task.createPracticeType" label="1">自动抽取</el-radio>
                    <el-radio v-model="obj.task.createPracticeType" label="2">手动抽取</el-radio>
                  </el-form-item>
                  <el-form-item label="题库类型：">
                    <el-checkbox-group style="margin-bottom: 20px" v-model="is_question_roid.type"
                                       @change="shouDongSelectType">
                      <el-checkbox v-for="(item,index) in childTypeList" @change="optFor(index,$event)"
                                   :label="item.dictCode" :key="index">
                        {{item.dictName}}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>

直接报空指针了。

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'task' of undefined
    at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"11fc2e0d-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/issue/issue_exam.vue?vue&type=template&id=170d8555&scoped=true& (1.js:47), <anonymous>:57:61)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
    at Watcher.get (vue.runtime.esm.js?2b0e:4473)
    at new Watcher (vue.runtime.esm.js?2b0e:4462)
    at mountComponent (vue.runtime.esm.js?2b0e:4067)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8409)
    at init (vue.runtime.esm.js?2b0e:3118)
    at merged (vue.runtime.esm.js?2b0e:3301)
    at createComponent (vue.runtime.esm.js?2b0e:5972)

请问要如何解决这个问题，为什么会这样呢？

Answer 1

我的测试例子并没有报错。那么来猜猜你是怎么报错了。
obj 的数据是 ajax 拉回来的。当页面渲染的时候 obj 是空的，所以报错了。过了一会数据回来，造成你查看的时候发现有数据但是报错了

http://jsrun.net/ugyKp/edit