Вывести товар с наименьшей ценой в Vue.js

Question

Есть массив items, в нем куча всего, перебираю, чтобы получить картинку, цену и тд. В нем делаю еще один перебор, чтобы получить массив с id и ценами. (item.id и item.price)

<div class='bestsellers-item' v-for='(item, index) in items' :key='index'>
  <div v-for='(item, index) in item.warehouse_positions' :key='index'>
   <button
    @click='addToCart(warehousePositionId = item.id)'>В корзину
   </button>
  </div>
</div>

Беда в том, что если в товаре несколько вариация, то кнопка "купить" не одна, а множится. Нужно чтобы была одна кнопка с наименьшей ценой. Каким образом это можно сделать?

Answer 1

Общий порядок решения - построение словаря со схемой idТовара: дешевейшаяПозиция, и его использование в шаблоне:

<div class='bestsellers-item' v-for='item in items' :key='item.id'>
  <button v-if='Boolean(mostAffordable[item.id])'
    @click='addToCart(warehousePositionId = mostAffordable[item.id].id)'
  >
    В корзину
  </button>
  <span v-else>Товар, возможно, закончился.</span>
</div>

computed: {
  mostAffordable() {
    return Object.fromEntries(Object.values(this.items).map(itm => {
      const bestPricePos = Object.values(itm.warehouse_positions).reduce(
        (rslt, pos) => ((pos.price < rslt.price ? pos : rslt), rslt), 
        { price: -Infinity }
      ); 
      return [itm.id, bestPricePos.hasOwnProperty('id') ? bestPricePos : null]; 
    })); 
  }, 
  /* .... */
},

БЛОГ НА HUSL

Вывести товар с наименьшей ценой в Vue.js

Ответы (1 шт):