Vue.js를 사용하여 대체 버튼을 클릭하여 대체 약품을 사용하고 싶다.

Vue.js를 사용하여 대체 버튼을 클릭하여 대체 약품을 사용하고 싶다.

여기 제 코드가 있습니다.제가 묻고 있는 것의 실제 시나리오를 얻을 수 있도록 몇 가지 이미지를 올렸습니다.

그리고 나는 내가 대체하고 있는 각 약의 지수를 캡처하고 싶다.

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;
},

이것은 보기 대체 버튼이 있는 약의 첫 화면입니다.

세컨드스크린 보기 의약품 대용품입니다

내가 대신할 수 없는 실제 시나리오

더 좋은 솔루션이 있나요?

참고: 첫 번째 화면에는 약물이 표시되며, VIEW SUPTUSTUTE를 클릭하면 해당 약물의 대체 결과가 표시된 다음 화면이 나타납니다.

SUBTITE를 클릭하면 약이 대체되거나 swap이라고 할 수 있습니다.내 경우는 그렇지 않거든

이 업데이트 코드를 대체할 수 있지만 DOM에 반영되지 않습니다.어떻게 해야 합니까?

네가 뭘 하고 싶은지 알 것 같아.JS Fielle의 예를 들어 보겠습니다.

스크립트:

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/

언급URL : https://stackoverflow.com/questions/53758270/i-want-to-substitiute-medicines-on-click-of-substitute-button-using-vue-js