在 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?')
        }
    },

当然，您可以根据自己的喜好更改任何内容，但这是基本思想