错误描述:

6a82f8a12cea181e66a35dd5627f9e7.png

    TypeError: Cannot read property 'length' of undefined
    at VueComponent.isLimitDisabled (element-ui.common.js?ccbf:6468)
    at Watcher.get (vue.esm.js?efeb:4488)
    at Watcher.evaluate (vue.esm.js?efeb:4593)
    at VueComponent.computedGetter [as isLimitDisabled] (vue.esm.js?efeb:4845)
    at VueComponent.isDisabled (element-ui.common.js?ccbf:6471)
    at Watcher.get (vue.esm.js?efeb:4488)
    at Watcher.evaluate (vue.esm.js?efeb:4593)
    at VueComponent.computedGetter [as isDisabled] (vue.esm.js?efeb:4845)
    at Object.get (vue.esm.js?efeb:2104)
    at Proxy.checkboxvue_type_template_id_d0387074_render (element-ui.common.js?ccbf:6177)

原因:

原来是自己粗心大意
在html里面用了小写,但是在data里面用了大写\

在vue中的定义了 v-model 的值是 form.layout ,这时候是小写,但是在我 data 中定义了 Layout

<el-checkbox-group v-model="form.layout">
                            <el-checkbox label="div+css" ></el-checkbox>
                            <el-checkbox label="HTML5" ></el-checkbox>
                            <el-checkbox label="boostrap" ></el-checkbox>
                            <el-checkbox label="表格布局" ></el-checkbox>
             </el-checkbox-group>

注意 v-model 中的 layout ,和 data 中的 Layout

    return { 
        form: {
          name: '',
          describe: '',
          headList: [],
          imgList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
          theme: [],
          pages: 3,
          Layout: [],
          technology: [],
          price:10,
       }
    };
  }

最后,终于找到错误原因了

原因:在vue.js中,是大小写敏感的,而且部分名称在vue.js中定义的时候采用了驼峰命名,例如:camelCase,PascalCase方式命名,而在dom模板内使用的时候,可以采用相应的kebab-case名称,当然前提是命名要规范,比如"myComPoNent"肯定无法与"my-component"对应。

最后把data里面的 Layout 改为小写的 layout

Last modification:August 7th, 2020 at 12:06 pm
如果觉得我的文章对你有用,请随意赞赏