有关vue报错:[Vue warn]: Cannot find element: #app

学习vue几天,在跟着教学视频做一个较完整的实例,结果刚开始渲染数据就出错,参数其他解决,记录一下vue踩坑记录1:

原因:
代码执行顺序是从上往下,js文件在body标签开头,此时new vue()对象的时候,dom 对象 el还没有加载出来

解决办法:
把引入的js文件放在的末尾

注:
引入文件用src , 在用到rel的时候是不显示数据,rel只是引入渲染样式,引入css文件可以用rel

<el-form-item label="所属站点”prop="substid"> <el-select filterable v-model="ruleform.substid"placeholder="请选择站点”@change="substidChange"> <el-option v-for="item in substidList" :key="item.substid" :label="item.substname" :value="item.substid"> </el-option> </el-select> </el-form-item>substidChange(){ let that = this; that.editdata = ""; let obj = {}; obj = that.substidList.find((item)=>{ return item.substid === that.ruleform.substid;//筛选出匹配数据 }); that.dataparam.substid = that.ruleform.substid; },切换站点时会报错[Vue warn]: Error in v-on handler: "TypeError: Cannot set properties of undefined (setting 'substid')" found in ---> <ElSelect> at packages/select/src/select.vue <ElFormItem> at packages/form/src/form-item.vue <ElForm> at packages/form/src/form.vue <AlarmEdit> at src/components/system/alarm/AlarmEdit.vue <ElDrawer> at packages/drawer/src/main.vue <AlarmView> at src/components/system/alarm/AlarmView.vue <Main> at src/components/main.vue <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:619 logError @ vue.runtime.esm.js:1893 globalHandleError @ vue.runtime.esm.js:1888 handleError @ vue.runtime.esm.js:1848 invokeWithErrorHandling @ vue.runtime.esm.js:1871 invoker @ vue.runtime.esm.js:2188 invokeWithErrorHandling @ vue.runtime.esm.js:1863 Vue2.$emit @ vue.runtime.esm.js:3903 emitChange @ element-ui.common.js:8763 handleOptionSelect @ element-ui.common.js:8943 invokeWithErrorHandling @ vue.runtime.esm.js:1863 Vue2.$emit @ vue.runtime.esm.js:3903 dispatch @ emitter.js:29 selectOptionClick @ element-ui.common.js:8123 click @ element-ui.common.js:7977 invokeWithErrorHandling @ vue.runtime.esm.js:1863 invoker @ vue.runtime.esm.js:2188 original._wrapper @ vue.runtime.esm.js:6961 vue.runtime.esm.js:1897 TypeError: Cannot set properties of undefined (setting 'substid') at VueComponent.substidChange (AlarmEdit.vue:204:1) at invokeWithErrorHandling (vue.runtime.esm.js:1863:26) at VueComponent.invoker (vue.runtime.esm.js:2188:14) at invokeWithErrorHandling (vue.runtime.esm.js:1863:26) at VueComponent.Vue2.$emit (vue.runtime.esm.js:3903:9) at VueComponent.emitChange (element-ui.common.js:8763:14) at VueComponent.handleOptionSelect (element-ui.common.js:8943:14) at invokeWithErrorHandling (vue.runtime.esm.js:1863:26) at VueComponent.Vue2.$emit (vue.runtime.esm.js:3903:9) at VueComponent.dispatch (emitter.js:29:22)
最新发布
03-30
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值