浏览器报Uncaught TypeError: Cannot read property 'trigger' of undefined解决方案

本文介绍了一种在使用Zepto时遇到的谷歌浏览器错误“Uncaught TypeError: Cannot read property 'trigger' of undefined”的解决方法。解决方案包括:通过chrome://flags/禁用指针活动选项并重启浏览器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在使用Zepto的时候谷歌浏览器报错 Uncaught TypeError: Cannot read property 'trigger' of undefined如截图:


解决办法如下

1、谷歌浏览器输入 chrome://flags/ 回车

2、找到 指针活动 那一项

3、选择 已停用


然后重启google浏览器就好了


为啥这个错:Uncaught TypeError: Cannot read properties of undefined (reading 'picUrl';<template> <div class="main"> <el-button type="primary" icon="el-icon-edit" class="btn" @click="categoryAdd">添加</el-button> <el-table ref="singleTable" border :data="tableData" highlight-current-row row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @current-change="handleCurrentChange" style="width: 100%"> <el-table-column property="id" label="类目ID"> </el-table-column> <el-table-column property="name" label="类目名"> </el-table-column> <el-table-column property="iconUrl" label="类目图标"> <template v-slot="scope"> <img :src="scope.row.iconUrl" alt=""> </template> </el-table-column> <el-table-column property="picUrl" label="类目图片"> <template v-slot="scope"> <img :src="scope.row.picUrl" alt=""> </template> </el-table-column> <el-table-column property="keywords" label="关键字"> </el-table-column> <el-table-column property="desc" label="简介" width="180"> </el-table-column> <el-table-column property="level" label="级别"> <template v-slot="scope"> <el-tag v-if="scope.row.level == 'L1'">一级类目</el-tag> <el-tag type="info" v-if="scope.row.level == 'L2'">二级类目</el-tag> </template> </el-table-column> <el-table-column property="" label="操作" width="190"> </el-table-column> </el-table> <el-dialog title="创建" :visible.sync="dialogVisible" width="50%"> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="类目名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="关键字"> <el-input v-model="ruleForm.keywords"></el-input> </el-form-item> <el-form-item label="级别"> <el-select v-model="ruleForm.level"> <el-option label="一级类目" value="L1"></el-option> <el-option label="二级类目" value="L2"></el-option> </el-select> </el-form-item> <el-form-item label="父目录" v-if="ruleForm.level == 'L2'"> <el-select v-model="ruleForm.pid" placeholder="0"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> <el-form-item label="类目图标"> <el-upload class="avatar-uploader" action="http://admin.bsmall.byesame.com/admin/storage/create" :headers="headers" :show-file-list="false" :on-success="handleAvatarSuccess" v-model="ruleForm.iconUrl"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item> <el-form-item label="类目图片"> <el-upload class="avatar-uploader" action="http://admin.bsmall.byesame.com/admin/storage/create" :headers="headers" :show-file-list="false" :on-success="handleAvatarSuccess2" v-model="ruleForm.picUrl"> <img v-if="imageUrl2" :src="imageUrl2" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item> <el-form-item label="简介"> <el-input v-model="ruleForm.desc"></el-input> </el-form-item> </el-form> </div> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </span> </el-dialog> </div> </template> <script> import { listCategory,listCatL1, createCategory, } from '@/api/category' export default { data() { return { headers: {}, imageUrl: '', imageUrl2: '', tableData: [], options: [], currentRow: null, dialogVisible: false, ruleForm: { name: '', keywords: '', level: 'L2', pid: '', iconUrl: '', picUrl: '', desc: '' }, rules: { name: [{ required: true, message: '请输入类目名称', trigger: 'blur' } ] }, } }, created() { this.getList() this.getLevel1() }, methods: { // 添加: categoryAdd() { this.dialogVisible = true // 在dom加载完成之后在加载 this.$nextTick(() => { this.$refs.ruleForm.resetFields(); }) console.log(this.ruleForm); }, // 父目录 getLevel1() { listCatL1().then(res => { // console.log(res.data); this.options = res.data.data.list }) }, // 上传图片 handleAvatarSuccess(res, file) { this.ruleForm.iconUrl = res.data.iconUrl this.imageUrl = URL.createObjectURL(file.raw); }, handleAvatarSuccess2(res, file) { this.imageUrl2 = URL.createObjectURL(file.raw); this.ruleForm.iconUrl = res.data.picUrl }, // 创建 submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { createCategory(this.ruleForm).then(res => { // console.log(res); if(res.code == 200) { this.$message({ message: "新增成功", type: "success" }) // 关闭模态框 this.dialogVisible = false // 刷新列表 this.getList() // 重置表单信息及校验 this.$refs[formName].resetFields(); } }) .catch(err => { // console.log(err); this.$message({ message: err.data.errmsg, type: "error" }) }) } else { console.log('error submit!!'); return false; } }); }, // 重置 resetForm(formName) { this.$refs[formName].resetFields(); }, // 表格渲染数据 getList() { listCategory(this.query).then(res => { // console.log(res.data,'88'); this.tableData = res.data.data.list }) }, handleCurrentChange(val) { this.currentRow = val; } } } </script> <style lang="scss" scoped> .main { padding: 20px; .btn { margin: 0 0 20px 100px; } ::v-deep .el-table .cell { text-align: center !important; /* 水平居中 */ vertical-align: middle; /* 垂直居中 */ } .cell img { height: 40px !important; } } .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409EFF; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 120px; height: 120px; line-height: 120px; text-align: center; } .avatar { width: 120px; height: 120px; display: block; } </style>
06-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值