首先介绍下项目背景,

需要将 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. python学习之生函数名的理解

    4.4.10 函数名的应用 函数名就是一个特殊的变量,后边跟上()之后可以执行函数: 1.作为一个变量使用 def func(): print('123') f1 = func f2 = f1 f1( ...

  2. Docker 镜像的操作

    1. 从docker 镜像仓库获取镜像 docker pull  [镜像名] 从 docker hub 中查看版本 获取 特定版本  docker pull centos 7.6.1801 2.    ...

  3. Python 用户交互程序(day1)

    一: 变量 变:变化,重在变字,量:计量,衡量,表示一种状态 变量赋值 : number = 1 变量的规则: 数字,字母,下划线, 任意组合,数字不能开头,python 的关键字不能用,变量名尽量有 ...

  4. Python 对于分表的操作

    在操作数据库的业务里,我们系统采用了orm框架 ,避免了过多的写sql,利用实体对数据库进行操作 需求: 账户系统里的account表是进行了分表,分表规则为accountid进行20取模,测试环境分 ...

  5. Java Content Repository API 简介 转自(https://www.ibm.com/developerworks/cn/java/j-jcr/)

    Java Content Repository API 简介 1 如果曾经试过开发内容管理应用程序,那么您应当非常清楚在实现内容系统时所遇到的固有难题.这个领地有点支离破碎,许多供应商都有自己的私有仓 ...

  6. 即时通讯IM

    即时通讯(Instant Messaging,后简称im)消息的可靠投递 一.报文类型 im的客户端与服务器通过发送报文(也就是网络包)来完成消息的传递 报文分为: 请求报文(request,后简称为 ...

  7. static 和extern关键字

    static是C++中常用的修饰符,它被用来控制变量的存贮方式和可见性.extern "C"是使C++能够调用C写作的库文件的一个手段,如果要对编译器提示使用C的方式来处理函数的话 ...

  8. 吴恩达机器学习103:SVM之大间隔分类器的数学原理

    1.向量内积: (1)假设有u和v这两个二维向量:,接下来看一下u的转置乘以v的结果,u的转置乘以v也叫做向量u和向量v的内积,u是一个二维向量,可以将其在图上画出来,如下图所示向量u: 在横轴上它的 ...

  9. VMware 中的win7虚拟机在一段时间后就会自动挂起

    VMware workstation 中的win7虚拟机在一段时间不用后就会自动挂起. 其实这不是VMware workstation 的问题,而是win7的问题.关闭win7系统 的自动休眠功能即可 ...

  10. php引用 & 详解

    在PHP 中引用的意思是:不同的名字访问同一个变量内容. 与C语言中的指针是有差别的.C语言中的指针里面存储的是变量的内容在内存中存放的地址 变量的引用 $a = 222; $b = &$a; ...