在 vue js 中顯示輸入更改警報

Question

僅當我想更改上一步的單選按鈕時，如何顯示確認警報？ 因此，如果我確認我的操作，則應刪除以下所有步驟。 我已經使用實現預期確認警報的方法將@change 指令綁定到單選按鈕，但它出現在我所做的每次更改中。

這是我的小提琴

提前感謝您的建議

 new Vue({ el: "#app", data() { return { answer: ["1"], stepsData: [ { id: "1", yes_section: "2", no_section: "4", name: "Step 1", }, { id: "2", yes_section: "5", no_section: "1", name: "Step 2", }, { id: "3", yes_section: "2", no_section: "4", name: "Step 3", }, { id: "4", yes_section: "2", no_section: "4", name: "Step 4", }, { id: "5", yes_section: "2", no_section: "4", name: "Step 5", }, ], }; }, computed: { quation() { return this.answer.map((answer) => { return this.stepsData.find((step) => step.id === answer); }); }, }, methods: { pushAnswer(answer) { this.answer.push(answer); }, confirmPopup() { alert('Are you sure?') }, }, });

 .step { background: #ccc; padding: 20px; margin-bottom: 15px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="(step, id) in quation":key="id" class="step"> <div v-html="step.name"></div> <div> <input type="radio":id="step.UF_NO_SECTION":name="step.ID":value="step.yes_section" @click="pushAnswer(step.yes_section)" @change="confirmPopup" /> <label:for="step.UF_NO_SECTION" class="legal-aid__step-btn button _outline _no" > YES {{ step.yes_section }} </label> </div> <div class="legal-aid__step-action_no"> <input type="radio":id="step.UF_NO_SECTION":name="step.ID":value="step.no_section" @click="pushAnswer(step.no_section)" @change="confirmPopup" /> <label:for="step.UF_NO_SECTION" class="legal-aid__step-btn button _outline _no" > NO {{ step.no_section }} </label> </div> </div> </div>

Answer 1

我會在每個stepData上添加一個名為isSelected的屬性，該屬性將初始化為false ，一旦單擊，它將更改為true 。

因此，您的數據將如下所示：

stepsData: [
        {
          id: "1",
          yes_section: "2",
          no_section: "4",
          name: "Step 1",
          isSelected: false
        },
   ....
]

您需要更改pushAnswer以將isSelected設置為 `true：

@click="pushAnswer(step)"

pushAnswer(answer) {
      answer.isSelected = true;
      this.answer.push(answer.yes_section);
    },

並且confirmPopup function 將檢查答案是否已經被選中：

@change="confirmPopup(step)"

confirmPopup(step) {
        if (step.isSelected) {
           alert('Are you sure?')
        }
    },

當然，您可以根據自己的喜好更改任何內容，但這是基本思想