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里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其 ...
随机推荐
- 学习Go语言(二)快速入门
作为一名学习过多种编程语言的“老码农”,学习一门新的语言不能像“新手”一样,要快速入门. 无论面向过程,还是面向对象的编程语言:静态语言,动态语言,一般都包括: 标识符.变量(常量).运算符.表达式. ...
- django.db.migrations.exceptions.BadMigrationError: Migration tests in app bl
这个错误基本上都是 替换文件后才会出现的问题 因为你替换后他的日志文件没有完全替换的话,那么日志对应不到就会出现这样的问题, 一个模糊的处理办法:重新进行数据迁移:首先删除migrations中除去_ ...
- 深入理解java:3. NIO 编程
I/O简介 I/O即输入输出,是计算机与外界世界的一个借口. IO操作的实际主题是操作系统. 在Java编程中,一般使用流的方式来处理IO,所有的IO都被视作是单个字节的移动,通过stream对象一次 ...
- 20191209 Linux就该这么学(4)
4. Vim编辑器与Shell命令脚本 Vim 编辑器中设置了三种模式-命令模式.末行模式和编辑模式. 命令模式:控制光标移动,可对文本进行复制.粘贴.删除和查找等工作. 输入模式:正常的文本录入. ...
- 接口自动化--数据加密之AES
在接口测试中,会遇到加密的请求数据,例如:常用的base64加密,AES加密,在这里,简述用Python转化AES的加密方法 原理 官网链接:https://pycryptodome.readthed ...
- [转帖]PostgreSQL pg_dump&psql 数据的备份与恢复
PostgreSQL pg_dump&psql 数据的备份与恢复 https://www.cnblogs.com/chjbbs/p/6480687.html 文章写的挺好 今天试了下 挺不 ...
- Mycat+Mysql主从复制实现双机热备
Mycat+Mysql主从复制实现双机热备 一.mysql主从配置原理 双机热备的概念简单说一下,就是要保持两个数据库的状态自动同步.对任何一个数据库的操作都自动应用到另外一个数据库,始终保持两个数据 ...
- 洛谷P1600 天天爱跑步——题解
题目传送 首先要考虑入手点.先考虑一个一个玩家处理,显然不加优化的话,时间复杂度是O(n)的.发现对于玩家路径上的点都有一个观察员,一个都不能忽视,看起来是很难优化了.在做题时,发现一个思路很难想,就 ...
- 利用aopc创建schema失败
执行neo4j-graph-algorithms的例子,运行以下代码报错: CALL apoc.schema.assert( {Category:['name']}, {Business:['id'] ...
- npm学习(十一)之package-lock.json
package-lock.json 描述 对于npm修改node_modules树或package.json的任何操作,都会自动生成package.json,它描述生成的确切树,以便后续安装能够生成相 ...