Я хочу заменить лекарства при нажатии кнопки замены с помощью Vue.js

Question

Вот мой код.Я загрузил несколько изображений, чтобы вы могли получить реальный сценарий того, что я спрашиваю.

И я также хочу получить индекс каждого лекарства, которое я заменяю

substituteExistMedicine() {
  const subMed = payload

const itemInCart = state.orderedMedicines.filter(item => item.id === subMed.activeId)[0];

const selectedSubstituteItem = state.medicineSubstitution[subMed.index];

const updatedSubstituteList = state.medicineSubstitution.map((substitute, i) => {
  if (i === subMed.index) {
    return {
      ...itemInCart
    };
  }

  return {
    ...substitute
  };
});

const updatedOrderedMedicines = state.orderedMedicines.map(item => {
    if (item.id === subMed.activeId) {
      return {
        ...selectedSubstituteItem
      };
    }

    return {
      ...item
    };
});
console.log('updatedOrderedMedicines', updatedOrderedMedicines)
this.medicineSubstitution = updatedSubstituteList;
},

Это первый экран лекарства, на котором есть кнопка замены лекарства

Это второй экран лекарства для замены

Мой реальный сценарий, в котором я не могудля замены

Доступно ли более приятное решение?

Примечание. На первом экране отображаются лекарства, а при нажатии на ПРОСМОТРЕТЬ ЗАМЕНУ затем отображается следующий экран с результатами замещения этого лекарства.

Когда я нажимаю на ЗАМЕНУ, она должна заменить лекарства, или я могу сказать, поменяться.что не происходит в моем случае.

Теперь это мой обновленный код, который я могу заменить, но он не отражается в DOM;что мне делать?

Answer 1

Мне кажется, я понимаю, что вы хотите сделать.Я сделал небольшой пример того, что вы пытаетесь сделать из JS Fiddle:

Сценарий:

new Vue({
  el: "#app",
  data: {
    medicines: [
        {
            name: 'greatMedicine',
        id: 1, 
        price: '100',
        substitutes: [
        {
          name: 'notSoGreatButCheaper',
          id: 3, 
          price: '20',
        }
        ]
        },
      { 
        name: 'anotherGreatMedicine',
        id: 2, 
        price: '150',
        substitutes: [
        {
          name: 'alsoGreatButCheaper',
          id: 4, 
          price: '30',
        }
        ]
      }
    ],
    showSubsMed: '-1'
  },
  methods: {
    substitute: function(med_index,sub_index){
        let medicine = this.medicines[med_index];
        let substitute = medicine.substitutes[sub_index];

        this.medicines.splice(med_index, 1, substitute);
    }
  }
})

HTML:

<div id="app">
  <h2>Medicines:</h2>
  <ol>
    <li v-for="(med,med_index) in medicines">
       {{med.name}} - {{med.price}}€
       <span v-if="med.substitutes">
       <button @click="showSubsMed === med.id ? showSubsMed = -1 : showSubsMed = med.id" class="btn-primary"> 
         <span v-if="showSubsMed === med.id">hide subs</span>
         <span v-else>show subs</span>
       </button>
        <ol>
        <li v-show="showSubsMed === med.id" v-for="(sub,sub_index) in med.substitutes" class="sub">
           {{sub.name}} - {{sub.price}}€ <button @click="substitute(med_index,sub_index)" class="btn-primary">Substitute!</button>
        </li>
        </ol>
        </span>
    </li>
  </ol>
</div>

https://jsfiddle.net/5mt0Loka/1/