我在组件的模板中有以下代码：
<th scope="row">{{@order.id}}</th>
<td>Name: {{@order.customer_name}}
</td>
<td>Delivery address: {{@order.address}}
Products in order: {{@order.products}}
Items: {{items}}
<td>{{@order.total_price}}$</td>
</tr>我有一个computed属性，它应该返回并呈现从数据库返回的对象数组中的每个产品名称：
items: computed('order.products', function() {
let products = this.get('order.products');
products.forEach(product => {
for(let i=0; i<products.length; i++){
return console.log(products[i].name);
}
});
}),当我运行以下命令时，一切正常，名称显示在控制台中，如下所示：
Cheese on toast
3 Pizza
2 Macaroons bowl但是当我尝试删除console.log并只返回products[i].name时，似乎什么都没有返回。是我遗漏了什么，还是我试图在页面上错误地呈现它？
1条答案
按热度按时间qmelpv7a1#
从代码片段中，我假设您只想从
items计算属性返回产品的名称。如果是这样的话，那么这里的一些问题是关于循环的处理，而不是实际的计算属性。因此，在您的示例中，可以使用map从products数组中只筛选出产品的名称。
另外，calculated属性只保留从定义返回的值，因此需要显式返回值，如上面的代码片段（
return productNames）所示。