在 vue js 中显示输入更改警报答案

【问题标题】：Show alert on input change in vue js在 vue js 中显示输入更改警报
【发布时间】：2021-12-27 20:17:05
【问题描述】：

仅当我想更改上一步的单选按钮时，如何才能显示确认警报？因此，如果我确认我的操作，则应删除以下所有步骤。我已经使用实现预期确认警报的方法将@change 指令绑定到单选按钮，但它会出现在我所做的每次更改中。

这是我的fiddle

提前感谢您的建议

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>

【问题讨论】：

您能更好地解释您想要实现的目标吗？你的问题不是很清楚。
关于您对@change 的使用，它会按照应有的方式行事——只要输入发生变化，它就会调用confirmPopup 方法。
@NoyGafni 嘿！我会尽力解释。最初块“第 1 步”始终可见。当我选择单选“是”或“否”时，出现第 2 步（数据取决于所选单选值）等等。但是，如果我想返回到第 1 步并更改选定的收音机，则应出现确认警报 - 这就是应调用 confirmPopup 方法的时间
我发布了一个答案，我建议您也编辑这个问题，这样会更清楚

标签： javascript vue.js vuejs2

【解决方案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 函数会检查答案是否已经被选中：

@change="confirmPopup(step)"

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

当然你可以根据自己的喜好改变任何东西，但这是基本的想法

【讨论】：