首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue 2 Mixin在v-for中不能正常工作,因为"[Vue warn]:呈现时出错:"TypeError:无法读取未定义的属性“”discountCalc“

Vue 2 Mixin在v-for中不能正常工作,是因为"[Vue warn]:呈现时出错:"TypeError:无法读取未定义的属性“discountCalc”。

这个错误通常是由于在v-for循环中使用Mixin时,Mixin中的属性或方法未正确定义或导入所致。为了解决这个问题,我们可以按照以下步骤进行排查和修复:

  1. 确保Mixin已正确导入:在使用Mixin之前,确保已正确导入Mixin文件,并且路径和文件名都是正确的。可以使用import语句导入Mixin文件。
  2. 检查Mixin中的属性和方法:确保Mixin中的属性和方法都已正确定义。在Mixin中定义的属性和方法应该能够在组件中正常访问和使用。
  3. 确保Mixin被正确应用:在组件中使用Mixin时,确保Mixin已正确应用。可以使用mixins选项将Mixin应用到组件中。
  4. 检查v-for循环中的数据:如果在v-for循环中使用Mixin,确保循环中的数据正确传递给Mixin中的属性和方法。可以通过打印或调试来检查循环中的数据是否正确。
  5. 检查错误提示中的具体信息:在错误提示中,有时会提供更具体的错误信息,例如属性或方法的名称。根据错误提示中的信息,可以更准确地定位和解决问题。

总结起来,当在v-for循环中使用Vue 2 Mixin时出现"[Vue warn]:呈现时出错:"TypeError:无法读取未定义的属性“discountCalc”"的错误时,我们需要检查Mixin的导入、属性和方法的定义、Mixin的应用以及循环中的数据等方面,以确保Mixin能够正常工作。

关于Vue 2 Mixin的更多信息,可以参考腾讯云的Vue.js文档:Vue.js

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

10 种 JavaScript 最常见错误

当你读取一个未定义对象属性或调用其方法时,这个错误会在 Chrome 中出现。 您可以很容易 Chrome 开发者控制台中进行测试。 ?...2TypeError: ‘undefined’ is not an object 这是 Safari 读取属性或调用未定义对象上方法时发生错误。...3、 TypeError: null is not an object 这是 Safari 读取属性或调用空对象上方法时发生错误。...我们工作,这种错误可能发生一种场景是:如果在加载元素之前尝试 JavaScript 中使用元素。 因为 DOM API 对于空白对象引用返回值为 null。...8、 TypeError: Cannot read property ‘length’ 这是因为读取未定义变量长度属性而发生错误。 您可以 Chrome 开发者控制台中进行测试。 ?

8.5K20

Vue3.x相对于Vue2.x变化

data、mixin和filter Vue2.x,我们可以定义data为object或者function,但是我们知道组件如果data是object的话会出现数据互相影响,因为object是引用数据类型...:msg2="msg2=$event"> v-for和key Vue2.x,我们都知道v-for每次循环都需要给每个子节点一个唯一key,还不能绑定在...-- result --> v-forref vue2.xv-for上使用ref属性,通过this....和v-if优先级 vue2.x一个元素上同时使用v-for和v-if,v-for有更高优先级,因此vue2.x做性能优化,有一个重要点就是v-for和v-if不能放在同一个元素上。...因此下面的代码,vue2.x正常运行,但是vue3v-if生效时并没有item变量,因此会报错: <div v-for="item in list" v-if="item

83320

封装一个基础vue-router

前言 主要知识点: 路由原理 Hash与History 实现路由 一、一个vue路由工作原理 前端路由与后端路由区别: 后端路由: 输入url>请求发送到服务器>服务器解析请求路径>拿取对应页面...内容 可以通过location.hash拿到 可以通过onhashchange监听hash改变 可以#号后面加路径不会向服务器请求 history: history即正常路径 location.pathname...方法 Vue.mixinvue全局混入自定义操作 可以通过this....$options拿到new Vue参数 示例: 以下都是main.js执行 1、初始Vue.use() Vue.use({ console.log(‘use’) //会打印出use }) 2、install...上面的vue是作为参数传进来,而不是import Vue from 'vueVue vue.mixin({ data () { return { c:123456 // 在其他页面this.c

25620

Vue项目处理错误上报如此简单

处理异常意义 随着网页项目越来越复杂,许多异常报错很难开发和测试阶段被发现,尽管你可能避开了语法等常规错误,但不可避免是代码在运行时错误你仍旧无法准确预料,假设现在有如下一段 Vue 代码,它在生命周期...、为每个 Promise 都处理 catch,但这不免显得有些狼狈,于是我思考能不能用更优雅方式,统一处理所有异常,将错误全局进行捕获然后上报分析。...('vue异常错误捕获: ', '错误发生在 ' + info) } 图片 可以看到异常成功被捕获了,因为我们模拟了一个数据错误导致渲染出错,所以错误发生在 render 层,如果是函数 Promise...,这也解释了为什么 Vue 捕获错误不会被全局 window.onerror 再次捕获,因为已经在这里抛出了。...本文介绍了如何简单地 Vue 全局捕获异常错误,提升代码健壮性,且能避免代码编写大量异常捕获块,同时也减少了出错时控制台大片飘红报警,收集错误可以帮助我们定位开发与测试阶段不易发现疑难杂症,

1.3K21

【Vuejs】778- 超全 Vuejs 知识点(基础到进阶)

Vuex 状态存储是响应式。当 Vue 组件从 store 读取状态时候,若 store 状态发生变化,那么相应组件也会相应地得到高效更新。 不能直接改变 store 状态。...这些都是计算属性无法做到Vue2.x组件通信有哪些方式?...Vue不能检测数组哪些变动?Vue 怎么用 vm.$set() 解决对象新增属性不能响应问题 ?...编码阶段 尽量减少data数据,data数据都会增加getter和setter,会收集对应watcher v-if和v-for不能连用 如果需要使用v-for给每项元素绑定事件时使用事件代理...消除了 Vue 2 当中基于 Object.defineProperty 实现所存在很多限制: 只能监测属性不能监测对象 检测属性添加和删除; 检测数组索引和长度变更; 支持 Map、Set、

3.3K51

Vue3 Reactive 响应式到底是什么

Vue3 Mixins 优缺点 Mixin 允许单独代码单元中提取组件功能。每个功能都放在一个单独 mixin ,每个组件都可以使用一个或多个 mixin。... mixin 定义代码可以组件中使用,就像它们组件本身定义一样。mixin 有点像面向对象语言中类。与类一样,mixin 可以在其他代码中继承。...这是一个问题,因为我们经常需要非常相似但不完全相同功能出现在不同组件一些简单情况下,可以使用 mixin 工厂函数来规避这种情况。...JavaScript 响应式(无论是 Vue 2 通过 defineProperty 实现,还是 Vue 3 基于 Proxy 实现时)都需要一个对象。... Vue 3 对计算值进行建模 使用 Vue 3,我们可以为每个单元格引入一个新计算属性。如果表增长,则引入新计算属性

91130

前端面试之Vue

计算属性 属性结果会被缓存,当computed函数所依赖属性没有发生改变时候,那么调用当前函数时候结果会从缓存读取。...如果要遍历数组很大,而真正要展示数据很少时,这将造成很大性能浪费 2.这种场景建议使用 computed,先对数据进行过滤 注意:3.x 版本 v-if 总是优先于 v-for 生效。...解惑传送门 ☞ # v-if 与 v-for 优先级对比非兼容 React/Vue 项目中 key 作用 key作用是为了diff算法执行时更快找到对应节点,提高diff速度,更高效更新虚拟...,如开发成本】 场景:PC端新闻列表和详情页一样右侧栏目,可以使用mixin进行混合 劣势:1.变量来源不明确,不利于阅读 2.多mixin可能会造成命名冲突 3.mixin和组件可能出现多对多关系...Vuex 状态存储是响应式;当 Vue 组件从 store 读取状态时候, 若 store 状态发生变化,那么相应组件也会相应地得到高效更新 2.

3.6K30

15个 Vue.js 高级面试题

只要用户没有输入或更改这些子组件中一个或多个子组件本地状态,此方法就可以正常工作。...这是因为 Vue 无法识别组件编号 3,它只是重新修补它所看到更新数据,即 span 标签内容。...在有条件地渲染组件或元素时,还可以用 key 属性来向 Vue 发出有关元素唯一性信号,并确保元素不会被新数据重新修补。 2.你将怎样模板渲染原始 HTML?...Vue 插件允许开发人员构建全局级别的功能并将其添加到 Vue。用于向程序添加可以全局访问方法和属性、资源,选项,mixin 以及其他自定义 API。...尽管 v-for 指令基于 HTML 模板起作用,但是当使用渲染函数时,可以简单地用标准 .map() 函数遍历 fruits 数据数组。 10.

2.9K20

这可能是你需要vue考点梳理

高阶组件就是高阶函数,而React组件本身就是纯粹函数,所以高阶函数对React来说易如反掌。相反Vue.js使用HTML模板创建视图组件,这时模板无法有效编译,因此Vue不能采用HOC来实现。...v-if和v-for哪个优先级更高实践不应该把v-for和v-if放一起vue2v-for优先级是高于v-if,把它们放在一起,输出渲染函数可以看出会先执行循环再判断条件,哪怕我们只渲染列表中一小部分元素...,能够清晰看到是先处理v-if还是v-for,顺序上vue2vue3正好相反,因此产生了一些症状不同,但是不管怎样都是不能把它们写在一起vue2.x源码分析vue模板编译时候,会将指令系统转化成可执行...Mixin 使我们能够为 Vue 组件编写可插拔和可重用功能。如果希望多个组件之间重用一组组件选项,例如生命周期 hook、 方法等,则可以将其编写为 mixin,并在组件简单引用它。...$set() 解决对象新增属性不能响应问题 ?受现代 JavaScript 限制 ,Vue 无法检测到对象属性添加或删除。

1.1K40

Vue源码学习和分析笔记

编译工作可以构建时做(可以借助 webpack、vue-loader 等插件);也可以在运行时做,使用包含构建功能 Vue.js。编译是一项耗性能工作,所以更推荐前者——离线编译。...platform 是 Vue.js 入口,2 个目录代表 2 个主要入口,分别打包成运行在 web 上和 weex 上 Vue.js。...) export default Vue 采用是ES5写法,并不是ES6Class写法优点,是因为: 1、使用混入Mixin方式传入Vue,为Vue原型prototype上增加方法。...初始化最后,检测到如果有 el 属性,则调用 vm.$mount 方法挂载 vm,挂载目标就是把模板渲染成最终 DOM。...而patch方法不同平台调用是不同浏览器时,是patch方法,而在非浏览器环境,比如node后端环境时,是一个noop空函数,主要也是因为只要在浏览器环境时才会有DOM元素。

1.3K21

常考vue面试题(必备)

,例如服务器渲染、移动端开发等等缺点:无法进行极致优化: 一些性能要求极高应用虚拟DOM无法进行针对性极致优化,比如VScode采用直接手动操作DOM方式进行极端性能优化如果让你从零开始写一个...原理1.在生成 ast 语法树时,遇到指令会给当前元素添加 directives 属性2.通过 genDirectives 生成指令代码3. patch 前将指令钩子提取到 cbs , patch...mixins 接收一个混入对象数组,其中混入对象可以像正常实例对象一样包含实例选项,这些选项会被合并到最终选项Mixin 钩子按照传入顺序依次调用,并在调用组件自身钩子之前被调用。...data数据,data数据都会增加getter和setter,会收集对应watcherv-if和v-for不能连用如果需要使用v-for给每项元素绑定事件时使用事件代理SPA 页面采用keep-alive...这种缓冲时去除重复数据对于避免不必要计算和 DOM 操作是非常重要。然后,在下一个事件循环tickVue 刷新队列并执行实际(已去重工作vue和react区别=> 相同点:1.

83430

合格vue开发者应该知道面试题

v-for不能连用如果需要使用v-for给每项元素绑定事件时使用事件代理SPA 页面采用keep-alive缓存组件更多情况下,使用v-if替代v-showkey保证唯一使用路由懒加载、异步组件防抖...Vue中封装数组方法有哪些,其如何实现页面更新Vue,对响应式处理利用是Object.defineProperty对数据进行拦截,而这个方法并不能监听到数组内部变化,数组长度变化,数组截取变化等...mixins 接收一个混入对象数组,其中混入对象可以像正常实例对象一样包含实例选项,这些选项会被合并到最终选项Mixin 钩子按照传入顺序依次调用,并在调用组件自身钩子之前被调用。...如果希望多个组件之间重用一组组件选项,例如生命周期 hook、 方法等,则可以将其编写为 mixin,并在组件简单引用它。然后将 mixin 内容合并到组件。...Vue模版编译原理vue模板template无法被浏览器解析并渲染,因为这不属于浏览器标准,不是正确HTML语法,所有需要将template转化成一个JavaScript函数,这样浏览器就可以执行这一个函数并渲染出对应

1.3K150

前端面试题 --- Vue部分

它必须用于向响应式对象上添加新属性因为 Vue 无法探测普通新增属性 (比如 this.myObject.newProperty = 'hi'),你会发现vue官网是vue.set,vue.set用法...$set()解决 问题原因:因为 vue 检查机制进行视图更新时无法监测 数组对象某个属性变化。...beforeCreate() 创建前,这个时候data数据,还未定义,所以不能使用 created()创建后 最早开始使用 data和methods数据钩子函数 beforeMount...vue.jsmixin和页面执行顺序问题 mixin代码先执行,单文件后执行。...尽量减少data数据,data数据都会增加getter和setter,会收集对应watcher v-if和v-for不能连用 v-if 和 v-show 区分使用场景 v-for 遍历必须加

1.9K20

vueIE下无法正常工作,Promise未定义

vue写了一个日历组件,Firefox、Edge、Chrome以及360等浏览器极速模式运行一切正常,如图: 但在IE和360等浏览器兼容模式下却显示了模板,看起来像乱码一样,如图: 按F12...左思右想,突然灵光一闪,ES5函数声明不能为形参赋默认值,这种写法是ES6新增,而IE是不兼容ES6,那就把代码改一改,这里不再赋默认值,为了让方法可以正确执行而不报错,调用这个方法地方都强制传参就好了...`错误,如下图: 这是因为`axios`使用了`es6`新增`Promise`对象导致,我们只需要在引入前先引入`es6-promise.auto.min.js`即可解决问题。...最后,我们项目是否需要兼容ES5需要您对您用户有一个较为明确认知,并不是所有项目都需要去做ES5兼容,毕竟因此会增加不少工作量。...VUE: 1 / 1 vueIE下无法正常工作,Promise未定义

4.1K20

中高级前端开发需要掌握vue知识点

当 render function 被渲染时候,因为读取所需对象值,所以会触发 getter 函数进行「 依赖收集 」,「 依赖收集 」目的是将观察者 Watcher 对象存放到当前闭包订阅者...这些都是计算属性无法做到Vue.extend 作用和原理官方解释:Vue.extend 使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项对象。...出现该问题是因为 Vue 代码尚未被解析之前,尚无法控制页面 DOM 显示,所以会看见模板字符串等代码。...很显然,模块方式可以拆分代码,但是缺点也很明显,就是使用起来比较繁琐复杂,容易出错。而且类型系统支持很差,不能给我们带来帮助。...-- 回调函数,会把接收到值赋值给属性绑定数据项。 -->图片v-model工作原理<!

41530

社招前端经典vue面试题汇总

优点:代码量少不需要考虑状态传递过程错误缺点:增加 A 组件维护成本需要传入额外 prop 到 B 组件无法利用路由定位页面除此之外,Vue,还可以是用keep-alive来缓存页面,当组件...Mixin 使我们能够为 Vue 组件编写可插拔和可重用功能。如果希望多个组件之间重用一组组件选项,例如生命周期 hook、 方法等,则可以将其编写为 mixin,并在组件简单引用它。...然后将 mixin 内容合并到组件。如果你要在 mixin 定义生命周期 hook,那么它在执行时将优化于组件自已 hook。vue2.x详细1....这种缓冲时去除重复数据对于避免不必要计算和 DOM 操作是非常重要。然后,在下一个事件循环tickVue 刷新队列并执行实际(已去重工作Vue3.0 为什么要用 proxy?...和setter,会收集对应watcherv-if和v-for不能连用如果需要使用v-for给每项元素绑定事件时使用事件代理SPA 页面采用keep-alive缓存组件更多情况下,使用v-if替代v-showkey

94430

前端系列第5集-Vue系列

v-show可以应用于任何元素上,并且只是简单地通过修改元素display属性来实现显示和隐藏,因此切换显示状态时开销较小,但是无法条件变化时进行销毁和重建元素。...这里可以进行一些清理工作。 destroyed:实例销毁后调用,此时 Vue 实例所有东西都已经完全释放掉了。 Vuev-if和v-for不建议一起使用,主要是因为它们会影响应用程序性能。...因此,为了提高应用程序性能,建议将v-if放置在外部元素上,或者使用computed属性来处理数据。这可以避免v-if和v-for同时出现时性能问题,并使代码更加清晰易懂。...Vue.js, data 属性是一个函数而不是一个对象,因为每个组件都应该拥有自己独立数据副本,而不是共享同一个数据对象。...这两个方法都可以让 Vue 监听到新属性变化,从而更新界面。 如果你要添加多个属性,可以将对象赋值为一个新对象。 如果你不能改变对象本身,可以使用计算属性来返回一个新对象。

15120
领券