Использование .find для поиска элемента по id — Vue / Vuex

#javascript #arrays #vue.js #vuex

#javascript #массивы #vue.js #vuex

Вопрос:

Я новичок в Vue и особенно в Vuex, но я не думаю, что это моя проблема здесь. Мои действия и мутации работают отлично , за исключением .функция поиска вызывает проблему, когда я пытаюсь увеличить (или уменьшить) во второй раз. Однако я могу добавить по одному из каждого элемента, если элемент еще не существует в currentOrder . Я думаю, это может быть связано с утверждениями if для обеих мутаций? Для контекста это интерактивное меню, меню представляет собой массив объектов item, а currentOrder — массив объектов item с количеством

 mutations: {
INCREMENT_QUANTITY(state, payload) {
  console.log("VUEX INCREMENT: Payload ID: "   payload.id);
  
  //If item already exists in currentOrder, increment quantity;
  if(state.currentOrder.find(o => o.id == payload.id)) {
    var index = state.currentOrder.find(o => o.id == payload.id);
    state.currentOrder[index].quantity   ;
  } else {
    state.currentOrder.push({
      //currentOrder item
      id: payload.id,
      title: payload.title,
      quantity: 1,
    })
  }
  for(var i = 0; i < state.currentOrder.length; i  ) {
    console.log(state.currentOrder[i]);
  }
},
DECREMENT_QUANTITY(state, payload) {
   console.log("VUEX DECREMENT");
   var orderItem = state.currentOrder.find(o => o.id === payload.id)
   //if item exists in currentOrder, decremenet quantity
   if(orderItem ) {
     console.log("if statement");
     if(orderItem.quantity != 0) {
       var index = state.currentOrder.find(o => o.id === payload.id)
       state.currentOrder[index].quantity --;
     }
   }
 }
},
actions: {
  incrementQuantity(context, payload) {
    context.commit('INCREMENT_QUANTITY', payload);
  }, 
  decrementQuantity(context, payload) {
    context.commit('DECREMENT_QUANTITY', payload);
  }
},
 

Вот мой консольный дисплей

Комментарии:

1. var index = state.currentOrder.findIndex(o => o.id === payload.id) . здесь используйте findIndex вместо find

2. Array.find() возвращает ссылку на найденный элемент массива, который вы можете изменить напрямую. Нет необходимости выполнять другой поиск. т.е., const x = state.currentOrder.find(...); if (x) { x.quantity ; }

3. Это сработало! большое вам спасибо