vue中为computed计算属性传参遇到的问题,已解决
首先介绍下项目背景,
需要将 dataList 中的 item.stars 属性传入 computed 返回要展示的值
部分代码如下(请不要纠结为什么这么做,数据格式确认如此):
<li class="recommend-list-item border-bottom"
v-for="item of recommendList"
:key="item.id"
>
<div class="recommend-list-item-comments">
<span>{{stars(item.star)}}星</span>
</div>
</li>
export default {
name: 'HomeRecommend',
data () {
return {
recommendList: [
{
id: '0001',
imgUrl: '/static/imgs/list/adca619faaab0898245dc4ec482b5722.jpg_250x250_0fc722c0.jpg',
title: '故宫',
star: [1, 1, 1, 1, 1],
comments: '32879',
price: '¥60',
location: '东城区',
desc: '世界五大宫之首,穿越与您近在咫尺'
}
]
}
},
computed: {
stars: function (star) {
var count = 0
star.forEach((item, index) => {
if (item) {
count++
}
})
return count
}
}
}
}
看起来完美,npm run start ,页面一刷,报错了!

看见度娘有类似问题~点进去一看,需要闭包
修改后代码如下:
computed: {
stars: function () {
return function (star) {
var count = 0
star.forEach((item, index) => {
if (item) {
count++
}
})
return count
}
}
}
再刷新一下,OK啦~
vue中为computed计算属性传参遇到的问题,已解决的更多相关文章
- Vue学习笔记【31】——Vue路由(computed计算属性的使用)
computed计算属性的使用 默认只有getter的计算属性: <div id="app"> <input type="text" ...
- 【vue开发】 计算属性传参
<template> <div> {{test('zhende', 'np')}} </div> </template> <script> ...
- vue中计算属性computed方法内传参
vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...
- vue中的computed(计算属性)和watch(监听属性)的特点,以及深度监听
//计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...
- 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中computed计算属性
话不多说,使用方法直接上代码//在模板中调用computedTest这个函数,切记不要在函数后添加()<template> <div class="home"&g ...
- Vue学习3:计算属性computed与监听器
下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...
- 浅尝 Vue 中的 computed 属性 与 watch
对于 computed 的理解: ①.computed 用来监控自己定义的变量,该变量不在 data 里面声明,直接在 computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其 ...
随机推荐
- (转)GIS中的4D产品(DLG、DRG、DEM、DOM)
DLG 数字线划地图(DLG, Digital Line Graphic):是与现有线划基本一致的各地图要素的矢量 数据集,且保存各要素间的空间关系和相关的属性信息. 在世字测图中,最为常见的产品就是 ...
- EINT DINT ERTM DRTM EALLOW EDIS ESTOP0的理解
本文参考以下资料整理 https://wenku.baidu.com/view/6b0d6906cf84b9d528ea7a66.html http://pangqicheng123.blog.163 ...
- 一本值得你反复研读的Python佳作《Python编程从0到1》
现在的Python入门书太多太多了,究竟如何选择呢? 当然选最好的最入门的讲解最清晰的,没有那么多废话的. 现在就推荐一本<Python编程从0到1>,还带视频的,到时候跟大家一起学习沟通 ...
- Hive开发中使用变量的两种方法
在使用hive开发数据分析代码时,经常会遇到需要改变运行参数的情况,比如select语句中对日期字段值的设定,可能不同时间想要看不同日期的数据,这就需要能动态改变日期的值.如果开发量较大.参数多的话, ...
- mybatis中foreach的用法以及特殊的情况的用法
foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合. foreach元素的属性主要有 item,index,collection,open,separator,close. ...
- vue.js(3)--v-bind与v-on
vue中的v-bind与v-on的使用 (1)实例 <!DOCTYPE html> <html lang="en"> <head> <me ...
- Css布局 响应式布局介绍
1. 概念: 写一套css样式可以同时适配多个终端,是为解决移动互联网诞生的. 2. 作用: 面对不同的分辨率设备灵活性强,能够快捷解决多设备显示适应问题 3. 原理 媒体查询 ① 外联式媒体查询语法 ...
- [转载]排序:长度为n的数组乱序存放着0至n-1. 现在只能进行0与其他数的swap
长度为n的数组乱序存放着0至n-1. 现在只能进行0与其他数的swap 请设计并实现排序. google笔试小题.题目来源:http://wenku.baidu.com/view/5aa818dda5 ...
- JAVA中如何定义自定义注解
了解注解 注解是Java1.5,JDK5.0引用的技术,与类,接口,枚举处于同一层次 .它可以声明在包.类.字段.方法.局部变量.方法参数等的前面,用来对这些元素进行说明,注释 . 在Java中,自带 ...
- AIX中磁带设备的使用
1.AIX中的磁带设备 在UNIX系统中,磁带一般具有如下共同属性. 磁带密度:指磁带使用时采用的低密度方式和高密度方式 回退操作:磁带一次写入操作完成后,是否立刻倒带,回退到磁带头部. 位置 ...