首先介绍下项目背景,

需要将 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计算属性传参遇到的问题,已解决的更多相关文章

  1. Vue学习笔记【31】——Vue路由(computed计算属性的使用)

    computed计算属性的使用 默认只有getter的计算属性:  <div id="app">    <input type="text" ...

  2. 【vue开发】 计算属性传参

    <template> <div> {{test('zhende', 'np')}} </div> </template> <script> ...

  3. vue中计算属性computed方法内传参

    vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...

  4. vue中的computed(计算属性)和watch(监听属性)的特点,以及深度监听

    //计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...

  5. 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue中computed计算属性

    话不多说,使用方法直接上代码//在模板中调用computedTest这个函数,切记不要在函数后添加()<template> <div class="home"&g ...

  7. Vue学习3:计算属性computed与监听器

    下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  8. 深入理解 Vue Computed 计算属性

    Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...

  9. 浅尝 Vue 中的 computed 属性 与 watch

    对于 computed 的理解: ①.computed 用来监控自己定义的变量,该变量不在 data 里面声明,直接在 computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其 ...

随机推荐

  1. USACO3.3 A Game【区间dp】

    这道题也是一道非常有意思的区间$dp$,和在纪中的这道题有点像:取数游戏 (除了取数规则其它好像都一样诶) 当时在纪中的时候就觉得这个$dp$非常不好想,状态定义都不是很容易想到. 但是做过一道这种题 ...

  2. 【神经网络与深度学习】【Qt开发】【VS开发】从caffe-windows-visual studio2013到Qt5.7使用caffemodel进行分类的移植过程

    [神经网络与深度学习][CUDA开发][VS开发]Caffe+VS2013+CUDA7.5+cuDNN配置成功后的第一次训练过程记录<二> 标签:[神经网络与深度学习] [CUDA开发] ...

  3. 【神经网络与深度学习】【CUDA开发】【VS开发】Caffe+VS2013+CUDA7.5+cuDNN配置过程说明

    [神经网络与深度学习][CUDA开发][VS开发]Caffe+VS2013+CUDA7.5+cuDNN配置过程说明 标签:[Qt开发] 说明:这个工具在Windows上的配置真的是让我纠结万分,大部分 ...

  4. Conetos 下安装docker 和镜像加速

    首先升级yum yum update 安装yum-utils,它提供yum-config-manager可以用来配置repo yum install -y yum-utils 使用以下命令设置稳定版 ...

  5. k8s-kubernetes-configmap存储

    存储 configMap configMap描述信息 ConfigMap功能在Kubernetes1.2版本中引入,许多应用程序会从配置文件.命令行参数或环境变量中读取配置信息. ConfigMap ...

  6. 关于Vue的一些事

    Vue的官方网站 https://cn.vuejs.org/ Vue中的一些重点 router Vuex 知其然,后知其所以然 这是一篇Vue的源码解读 http://hcysun.me/2017/0 ...

  7. 【转帖】UDIMM、RDIMM、SODIMM以及LRDIMM的区别

    转载自http://www.sohu.com/a/165343889_781333. DIMM简介 DIMM(Dual Inline Memory Module,双列直插内存模块)与SIMM(sing ...

  8. Linux下面误删除文件使用extundelete工具恢复介绍

    操作系统版本:CentOS release 6.4 (Final)      软件版本:extundelete-0.2.4.tar.bz2 PS:该软件恢复文件系统仅支持ext2/ext3/ext4 ...

  9. numpy-tile 数组复制

    tile(A, reps):把数组A复制成新数组 # 把 矩阵 看做一个整体,第二个参数代表把 矩阵 复制 m*n 次 b = np.arange(1, 5).reshape(2, 2) print( ...

  10. WebSocket的使用(基于VUE与SpringBoot)

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 We ...