时间戳

首页 > 解决方案 > 我想使用 Vue.js 点击替代按钮来替代药物

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

这是具有查看替代按钮的药物的第一个屏幕

这是第二个屏幕观看药物替代品

我无法替代的实际情况

有更好的解决方案吗？

注意：第一个屏幕显示药物，当单击查看替代品时，然后查看该药物替代结果的下一个屏幕。

当我点击 SUBSTITUTE 时，它应该替换药物或者我可以说交换。这在我的情况下没有发生。

现在这是我可以替换的更新代码，但它没有反映在 DOM 中；我应该怎么办？

标签： vue.jsvuejs2vuex

解决方案

我想我明白你想做什么。我做了一个小 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/

推荐阅读