vue 3 element plus 报错 Uncaught TypeError: Cannot set property ‘value‘ of undefined

8 篇文章 0 订阅
4 篇文章 0 订阅

项目场景:

学习vue3 composition api 时候,使用element plus的el-form > e-input 官方示例报错

问题描述:

源代码


	<el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="xxx">
          <el-input v-model="form.wbUrl.value"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>

  • input输入后会报错

报错信息
关键词:runtime-core.esm-bundler.js:217 Uncaught TypeError: Cannot set property 'value' of undefined[Vue warn]: Unhandled error during execution of component event handler

原因分析:

解决方案:

把示例中的ref="form"改成ref="refForm",我们需要给el-form的ref创建一个对象,不可以跟form对象混用



	<el-form ref="refForm" :model="form" label-width="80px">
        <el-form-item label="xxx">
          <el-input v-model="form.xxx.value"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>


setup () {
    const refForm = ref(null)
    return {
    	refForm
    }
}


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的引用内容,报错信息是"Uncaught TypeError: Cannot read properties of undefined (reading 'install')"。这个错误通常发生在Vue.js项目中,可能是由于未正确安装或使用Vue插件导致的。 解决这个问题的方法有以下几种: 1. 确保正确安装了Vue插件:检查项目中是否正确安装了所需的Vue插件。可以使用npm或yarn等包管理工具来安装插件。确保在项目的package.json文件中添加了所需的依赖项,并且已经运行了安装命令。 2. 检查插件的版本兼容性:有时候,插件的版本可能与Vue的版本不兼容,导致出现错误。请确保所使用的插件版本与Vue的版本兼容。可以查看插件的文档或官方网站来获取相关信息。 3. 检查插件的使用方式:有些插件需要在Vue实例中使用Vue.use()方法进行安装。请确保在使用插件之前正确调用了Vue.use()方法。如果插件没有提供Vue.use()方法,那么可能是插件的使用方式不正确,需要参考插件的文档或示例来正确使用。 4. 检查引入的文件路径:报错信息中提到了一个文件路径,可能是在引入文件时出现了问题。请确保引入的文件路径是正确的,并且文件存在于指定的位置。 5. 检查其他可能的错误:如果以上方法都没有解决问题,可以尝试检查其他可能的错误。例如,检查是否有其他代码或配置文件中存在错误,或者是否有其他插件或库与Vue产生冲突。 希望以上方法能够帮助您解决问题。如果问题仍然存在,请提供更多的信息或代码片段,以便更好地帮助您解决问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值