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里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其 ...
随机推荐
- P1706 【全排列问题】
超级无敌大题面~~ 这题倒也花了我不少时间,不停想节省空间,但这也确实是最省的了... 主要思路呢,要注意标记数有没有选过,并标记每个数的输出顺序.. 具体注释见代码: #include<cst ...
- Python Basics with Numpy
Welcome to your first assignment. This exercise gives you a brief introduction to Python. Even if yo ...
- Metinfo5.1 /message/access.php SQL注入漏洞
- USACO4.1 Beef McNuggets【数学/结论】
吐槽/心路历程 打开这道题的时候:*&@#%*#?!这不是小凯的疑惑吗?好像还是个加强版的?我疑惑了.原来$USACO$才是真的强,不知道什么时候随随便便就押中了题目. 对于我这种蒟蒻来说,这 ...
- 【OpenCV开发】imread和imwrite的类型以及第三个参数关于图片压缩质量等
本片参考博客:http://blog.csdn.net/poem_qianmo/article/details/20537737 基于OpenCV3.0,与原博客有出入. 在OpenCV1.0时代,基 ...
- 用SelectSingleNode()方法查找xml节点一直返回null
代码使用如下 XmlNode root = xmlDoc.SelectSingleNode("Project"); 返回的root一直是null 查了xml文件中确实是有Proje ...
- python 并发编程 多进程 生产者消费者模型总结
生产者消费者模型总结 生产者消费者模型什么时候用? 1.程序中有两类角色 一类负责生产数据(生产者) 一类负责处理数据(消费者) 2.引入生产者消费者模型为了解决的问题是 平衡生产者与消费者之间的速度 ...
- PERCONA-TOOLKIT 安装 使用
1.基于MySQL主从环境 可以参考https://www.cnblogs.com/xianglei_/p/12068241.html 上传rpm包 并安装 1 2 cd /usr/local/src ...
- 洛谷 P3386 二分图匹配 题解
题面 这道题虽然是练习匈牙利算法的,但可以用网络流来切掉它: 我们可以建立一个超级源和一个超级汇,超级源连接左部分点,超级汇连接右部分点: 然后在该图上跑最大流就可以了: PS:我设的超级源是2001 ...
- ubuntu下python3虚拟环境的配置
安装相关包 sudo pip3 install virtualenv # 虚拟环境包 sudo pip3 install virtualenvwrapper # 虚拟环境管理包 创建虚拟环境目录 su ...