Vue3报错Property “xxx“ was accessed during render but is not defined on instance

简介: Vue3报错Property “xxx“ was accessed during render but is not defined on instance

正文

在重构项目是也是遇到两个场景出现上述报错。

  1. 第一种是完全切合官方的提示,在模板中有使用到某个属性,而在setup选项中没有定义,包括defineProps传递进来组件的数据和组件本地数据。
// 请确保模板中使用的属性在setup选项中有定义
<script setup>
import { ref } from 'vue'
const status = ref(false)
</script>
<template>
  <div v-if="status"></div>
<template/>
// 组件传入参数
<script setup>
defineProps({
  status: {
    type: Boolean
  }
})
</script>
<template>
  <div v-if="status"></div>
<template/>
  1. 第二种就是不切合官方提示的场景。由于自己项目重构,使用到的UI库是elementPlus,模板代码和逻辑层代码部分是从Vue2版本直接移植过来,使用Vue3写法修改的。在使用到elementPlus中的表单Form结合Vue3写法就出现了上述问题。
// 在Vue2.x中,elementUi的表单Form中的ref和v-model同名时不会出现问题
<el-form ref="myForm" v-model="myForm"></el-form>
获取
this.$ref.myForm...
this.myForm...
// 在Vue3.x的setup语法糖下,elementPlus的表单Form中的ref和v-model同名时就会出现同名覆盖的问题,ref的优先级更高
//定义
const myForm = reactive({
  name: '小明',
  age: 18
})
<el-form ref="myForm" v-model="myForm"></el-form>
console.log(myForm)
// 打印出来的是el-form的组件DOM实例,模板找不到v-model的值,就会报`Property "myForm" was accessed during render but is not defined on instance.`

解决方法

  1. 请确保好模板中引用到的属性,在setup语法糖中有定义或被组件传入。
  2. Vue3的setup语法糖写法下,在使用elementPlus的表单Form时要注意,refv-model不要同名,问题就得到解决了。

常用的JavaScript设计模式

  • 单体模式
  • 工厂模式
  • 例模式

函数

  • 函数的定义
  • 局部变量和全局变量
  • 返回值
  • 匿名函数
  • 自运行函数
  • 闭包


相关文章
|
3天前
|
JSON JavaScript 前端开发
在Vue3项目中,Vite起到的作用及其可以做的事情
Vite是Vue 3项目的关键快速开发服务器和高效的热模块替换(HMR)。它的亮点包括:使用ES模块实现快速启动和动态加载,模块级别HMR提升开发效率,Rollup打包优化生产构建。此外,Vite还支持插件系统、自定义配置、静态资源处理和现代JS特性。通过`npm create vite`可快速搭建Vue项目,配置文件`vite.config.js`可定制行为,`.env`文件管理环境变量。Vite优化了开发与构建流程,提高开发者效率并保证构建性能。
|
11天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
24 1
|
11天前
|
JavaScript 前端开发 数据安全/隐私保护
vue3+ts+elementplus写一个登录页面教程
【6月更文挑战第3天】本文介绍了如何使用 Vue 3 和 TypeScript 创建一个登录页面。首先,需安装 Vue CLI,然后创建新项目并启用 TypeScript 支持。接着,创建 `Login.vue` 组件,设计登录表单,包括用户账号、密码和验证码字段,并实现相关验证规则。页面样式包括背景、登录框和按钮等元素的布局与样式。最后,展示了`&lt;script&gt;`部分的代码,包括表单验证逻辑、生成验证码的函数以及登录提交处理。文章还提供了一个登录页面的截图和完整代码示例。
47 1
|
11天前
|
JavaScript API
vue3+element实现一个公告面板
vue3+element实现一个公告面板
36 0
vue3+element plus图片预览点击按钮直接显示图片的预览形式
vue3+element plus图片预览点击按钮直接显示图片的预览形式
|
1天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
54 7
使用 Vue CLI 脚手架生成 Vue 项目
|
3天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
3天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
9 1
|
4天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
18 0