首先介绍下项目背景,

需要将 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学习之表的介绍

    9.4 表的介绍 存储引擎 数据的存储方式就是存储引擎,引擎不同,数据的存储方式就不同 MySQL中比较重要的引擎: InnoDB:mysql5.6以上,默认的存储方式 ​ 支持 transactio ...

  2. sklearn.preprocessing.StandardScaler数据标准化

    原文链接:https://blog.csdn.net/weixin_39175124/article/details/79463993 数据在前处理的时候,经常会涉及到数据标准化.将现有的数据通过某种 ...

  3. 洛谷 P1194 飞扬的小鸟 题解

    题面 这道题是一道隐藏的比较深的DP(我太蒟蒻了!) 设f[i][j]表示到第i列时高度为j的最少步数是多少: 求上升时的方案就是一个完全背包!,求下降时的方案就是一个01背包: 然后处理边界就能A掉 ...

  4. 26. Remove Duplicates from Sorted Array(代码思路新奇)

    Given a sorted array, remove the duplicates in-place such that each element appear only once and ret ...

  5. 在springboot中集成jsp开发

    springboot就是一个升级版的spring.它可以极大的简化xml配置文件,可以采用全注解形式开发,一个字就是很牛.在springboot想要使用jsp开发,需要集成jsp,在springboo ...

  6. 更新 | 2019年9月计算机二级office模拟题库

    随着2019年上半年计算机二级考试的完美落幕,紧接着的便是9月份的考试了. 到目前为止,下半年9月份计算机二级考试报名开通时间在6月前后,现在也基本结束. 2019年9月(56次)全国计算机等级考试( ...

  7. C# Entity Framework 更新数据的三种方法

    例: 实体类: public class TestDbContext : DbContext { public DbSet<Test> Tests { get; set; } public ...

  8. shared_ptr的原理与应用

    new与赋值的坑 赋值(assignment)和new运算符在C++与Java(或C#)中的行为有本质的区别.在Java中,new是对象的构造,而赋值运算是引用的传递:而在C++中,赋值运算符意味着& ...

  9. Linux学习--第十天--bash脚本、用户自定义变量、环境变量、位置参数变量、预定义变量、标准输入输出、wc、history、dd、PS1

    shell简介 分为两种c shell 和b shell b shell:sh.ksh.Bash.psh.zsh: (Bash和sh兼容,linux基本shell是Bash) c shell:csh. ...

  10. MYSQL安装相关知识

    将mysql安装为winsow服务 1.执行命令: mysqld-nt.exe --install (安装到windows的服务) 或者是mysqld -install 2.执行命令: net sta ...