“Property or method “***“ is not defined on the instance but referenced during render.”报错的原因及解决方案

news2025/1/24 8:41:29

报错问题:

在使用vue-cli运行项目的过程中,在VScode中不报错,但在浏览器调试工具中发出 

[Vue warn]: Property or method "******" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. 的报错。

报错原因:

属性或方法“list”未在实例上定义,但在渲染期间被引用。通过初始化该属性,确保该属性是被动的,无论是在数据选项中,还是对于基于类的组件。所以,由此我们就知道了,在vue的template中我们使用了list数据,但是在data中还并没有被定义,就被使用了,造成了这个错误。在data中定义一下这个list的数据就可以了

在调试工具报错如下:

解决方案:

1、检查所用的属性和方法是否被定义 

        如果未定义,在相应位置定义即可

2、检查定义是否写错位置(要与props同级)

修改后就可以运行啦 

 修改后,发现不会报错了,可以正常运行啦

   如果有问题,欢迎大家评论区讨论,文章对你有用,给正在学习前端的小陈点个赞吧~~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407961.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue-day01 使用cdn引入使用

vue-day01vue?vue简明例子模板语法1. 使用{{}} Mustache语法将数据绑定到对应的实例2.使用 v-once指令3.v-html指令4.v-bind指令和v-on指令5.动态参数,修饰符,指令缩写动态参数修饰符指令缩写vue? Vue 是一套用于构建用户界面的渐进式框架。与其它大型…

前端不使用 i18n,如何优雅的实现多语言?

前言: 关于ERP管理系统的多语言,或者其他应用的多语言一直是我们比较麻烦的问题,大部分是使用 i18n 在代码里进行配置,如果想要修改语言就要自己去改代码! 今天我们分享一下如何不使用 i18n 去实现多语言,用…

web前端面试高频考点——Vue的基本使用(一文掌握Vue最基础的知识点)

系列文章目录 内容参考链接Vue基本使用Vue的基本使用(一文掌握Vue最基础的知识点)Vue通信和高级特性Vue组件间的通信及高级特性(多种组件间的通信、自定义v-model、nextTick、插槽)Vue高级特性Vue的高级特性(动态组件…

ES6遍历方法,forEach、for...in,for..of

前言 js中遍历方法很多,在ES6新特性中出现了很多新的遍历方法,使遍历数组和对象更加方便,下面开始列举各种方法。 1.遍历对象 1.1.for…in…循环遍历对象自身和继承的可枚举的属性(不包括Symbol,因为symbol的实例是…

微信小程序开发入门与实战(数据、事件、条件)

作者 : SYFStrive 博客首页 : HomePage 📜: 微信小程序 📌:个人社区(欢迎大佬们加入) 👉:社区链接🔗 📌:觉得文章不错可以点点关注 &#x1f4…

layui 的数据表单的defaultToolbar参数中筛选列,图标,打印,三个功能,调用单独拿出使用

项目场景: 参数之defaultToolbar: 在使用layui开发的过程中,常常会用到 数据表单 这一关键模块,在这里讲一下defaultToolbar:[filter,exports print]-------“头部工具栏右侧图标”,如何将这三个按钮调用出来&#x…

【vscode】vscode常用插件介绍

1、Angular Snippets(angular片段) 这个扩展为 TypeScript 和 HTML 添加了 Angular 的代码片段。 2、Auto Close Tag(自动闭合标签) 自动添加 HTML/XML 关闭标记。 3、Auto Rename Tag(自动重命名标签) 自…

Three.js基础入门系列(九)--导入3D模型

先来学习今天的知识——Three.js导入3D模型 复杂的3D模型(比如制作一个飞机模型)一般都是用第三方建模工具生成,然后加载到Three.js中。 01 常用建模制作工具 3Dmax 链接地址:https://www.autodesk.com.cn/products/3ds-max/over…

启动vue-element-admin 安装npm install报错npm ERR! code 128npm ERR! An unknown git error occurre

使用vue-element-admin前端项目,前提是有nodejs环境,对于此环境的安装可以参考网上的博客。此博客用于记录启动项目以及遇到的问题、并解决问题的过程。1、介绍vue-element-admin是基于element-ui 的一套后台管理系统集成方案 。功能:https:/…

Vue基础教程(下篇)

😊作者简介:大家好,我是是你的大头呢,一名大三学生,考研备考中。让我们一起加油,一起努力! 🧑‍💻博客主页:是你的大头呢 🥰欢迎关注&#x1f38a…

javascript 中搜索数组的四种方法

前端经常要通过 javaScript 来处理数组中的数据,其中就包括检查数组中是否包含满足特定搜索条件的单个或者多个值,这就需要我们关于用于确认的布尔值、数组中值得位置索引或包含所有搜索结果的单独数组等。 在 ECMAScript6 之前,最常用的方法…

Vue中 this.$set的用法

一、this.$set能够实现什么功能 官方解释:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue无法探测普通的新增属性 (比如 this.myObject.newProperty …

pdf在线预览 pdf.js的使用

1.官网:https://mozilla.github.io/pdf.js/ 2、使用方法 1) 通过官网,下载pdfJs插件包,放至项目中; window.open("./js/pdfJS/web/viewer.html?fileAngularJS权威指南.pdf" );2)将下载的pdfJS…

uniapp封装axios?大可不必那么麻烦。

最近群里的一个小明同学问 uniapp可以使用axios请求吗?我当时就一愣 反问为什么要使用axios,是 uni.request 不香了吗? 小明:因为axios可以像vue的项目一样,在request里面封装巴拉巴拉一堆。 我:那uni.re…

微信小程序开发使用onreachBottom实现页面触底加载及分页

目录 一 简要介绍一下onreachBottom事件 二 实例展示 三 遇到的一些问题 一 简要介绍一下onreachBottom事件 onreachBottom和onLoad以及onShow一样,都属于小程序的生命周期事件,作用就是在页面下拉到底部时触发这个事件,一般适用于数据比较…

一次跨域的坑Faild to load response data: No resourse with given identifier found

有一个导出接口,前后端都没有动过,之前也测试过没有问题。上到测试环境后,测试环境加了证书,报错了。 先是后端小朋友和我说了这个问题: 浏览器控制台打印信息(聊天记录中那张图):然后我问他操作了哪个页面…

vue3.0教程——搭建Vue脚手架【简化版】

目录 哈喽,大家好丫,你们的小郭子又来啦 ~ 一、环境要求 (1)node安装(前端开发环境) (2)vue-cli脚手架安装 二、安装依赖 (1)使用命令行安装以下依赖 &a…

Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理

Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理 目录 Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理 一、简单介绍 二、安装和使用 三、效果图 四、vue-seamless-scroll 点击事件…

(网页开发/前端)配置VsCode,让您拥有更舒适的开发环境

vscode,微软旗下的一款强大的IDE集成开发环境,现在,越来越多的网页开发人员选择使用vscode来敲代码。 但是,在不添加任何扩展的vscode中,想要享受“丝滑”的开发体验是比较困难的。所以,接下来,…

js从地址栏获取参数

一、过程分四步: 1.获取地址栏; var loclocation.href; 2.获取地址栏的长度 var n1loc.length; 3.获取地址栏中第一个等号的位置; var n2loc.indexOf(); 4.以等号位置,截取后面的内容; var strloc.slice(n2…