Vue中如何获取数组中成本最低的元素？——实现仅展示item.warehouse_positions数组内最低价格对应的item.id

嘿，我来帮你解决这个问题！你现在的代码是遍历所有仓库位置条目，但你只需要价格最低的那条的ID，对吧？咱们可以用Vue的计算属性来优雅地实现这个需求，这也是Vue里处理这类响应式数据筛选的最佳实践。

方案一：Vue 2/Options API 写法 #

首先，在组件的computed选项里定义一个计算属性，专门用来筛选出价格最低的仓库位置条目：

export default {
  data() {
    return {
      item: {
        warehouse_positions: [
          { id: 1, price: 100 },
          { id: 2, price: 50 },
          { id: 3, price: 75 }
        ]
      }
    };
  },
  computed: {
    lowestPriceWarehouseItem() {
      // 先处理数组为空的边界情况，避免报错
      if (!this.item.warehouse_positions || this.item.warehouse_positions.length === 0) {
        return null;
      }
      // 使用reduce方法遍历数组，找出价格最低的条目
      return this.item.warehouse_positions.reduce((prev, current) => {
        return prev.price < current.price ? prev : current;
      });
    }
  }
};

然后在模板里直接渲染这个计算属性的结果就好，不用再用v-for遍历所有条目了：

<!-- 当有数据时展示最低价格的条目ID和价格 -->
<div v-if="lowestPriceWarehouseItem">
  {{ lowestPriceWarehouseItem.id }} -- {{ lowestPriceWarehouseItem.price }}
</div>
<!-- 数组为空时的提示 -->
<div v-else>
  暂无仓库位置数据
</div>

方案二：Vue 3/Composition API 写法 #

如果你用的是Vue 3的Composition API，写法稍微调整一下：

import { ref, computed } from 'vue';

export default {
  setup() {
    const item = ref({
      warehouse_positions: [
        { id: 1, price: 100 },
        { id: 2, price: 50 },
        { id: 3, price: 75 }
      ]
    });

    const lowestPriceWarehouseItem = computed(() => {
      if (!item.value.warehouse_positions || item.value.warehouse_positions.length === 0) {
        return null;
      }
      return item.value.warehouse_positions.reduce((prev, current) => {
        return prev.price < current.price ? prev : current;
      });
    });

    return { lowestPriceWarehouseItem };
  }
};

模板部分和Options API的写法完全一样，就不重复啦。

为什么这么做？ #

• 计算属性是响应式的：当warehouse_positions数组里的数据发生变化时，计算属性会自动重新计算出最新的最低价格条目，不用手动触发更新。
• 更高效：相比用v-for遍历所有条目再筛选，计算属性只会在依赖变化时重新计算，性能更好。
• 代码更清晰：把数据筛选的逻辑和模板渲染逻辑分开，可读性更强。

内容的提问来源于stack exchange，提问作者Alex