如何在Vue中从数组中获取成本最小的元素

Question

我有item.warehouse_positions数组，它有几个价格和id，但我只需要查看一个最低价格的item.id。我该怎么做呢?

<div v-for='(item, index) in item.warehouse_positions' :key='index'>
{{ item.id }} -- {{ item.price }}
</div>

Answer 1

const lowestItem = item.warehouse_positions.sort((x, y) => x.price - y.price)[0];

按价格排序，取出第一个，它应该是最便宜的。

在Vue中，最好的方法是创建一个computed属性来返回这个对象。

Answer 2

创建计算属性

computed:{
getLowestItem(){
return this.<YOUR_ARRAY_IN_DATA>.sort((a,b)=>a.price-b.price)[0]   
}
}

显示在你的模板中

<div>"{{getLowestItem}}"</div>