【VUE】使用elementUI上传组件-提示不存在

使用elementUI上传组件上传图片后,表单验证还是提示不存在

主要是因为组件包的层级比较深,验证取不到值导致

可以通过绑定其他元素获取到值进行验证

比如增加el-checkbox-group元素,将值绑定到它上面

javascript 复制代码
<el-form :model="Form" ref="form" :rules="rules">
      <el-form-item prop='imageUrl'>
        <el-checkbox-group v-model="form.imageUrl" v-show="false"></el-checkbox-group>
        <el-upload
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :http-request="handleAvatarSuccess">
          <img v-if="Form.imageUrl" :src="Form.imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>

export default { data() { return { Form: { imageUrl: '' }, rules: { imageUrl: [ { required: true, message: '请上传图片', trigger: 'change' } ], } } },
相关推荐
yuhaiqiang11 分钟前
为什么这道初中数学题击溃了所有 AI
前端·后端·面试
djk888813 分钟前
支持手机屏幕的layui后台html模板
前端·html·layui
紫_龙15 分钟前
最新版vue3+TypeScript开发入门到实战教程之watch详解
前端·javascript·typescript
默默学前端1 小时前
ES6模板语法与字符串处理详解
前端·ecmascript·es6
lxh01131 小时前
记忆函数 II 题解
前端·javascript
我不吃饼干1 小时前
TypeScript 类型体操练习笔记(三)
前端·typescript
华仔啊1 小时前
除了防抖和节流,还有哪些 JS 性能优化手段?
前端·javascript·vue.js
chenhdowue1 小时前
vue 表格 vxe-table 高亮行支持取消操作
vue.js·vxe-table
CHU7290351 小时前
随时随地学新知——线上网课教学小程序前端功能详解
前端·小程序
清粥油条可乐炸鸡1 小时前
motion入门教程
前端·css·react.js