Vue.js中如何检查所有单选框问题已作答后允许页面离开

解决方案 #

你需要修改两处代码即可实现需求：

1. 修复子组件parentComponent.vue的问题 #

当前子组件存在两个逻辑缺陷：

• No选项的单选框没有绑定@change事件，选中后不会触发数据更新
• 无论选Yes还是No都固定返回status=1，无法区分用户选择
  修改后的子组件代码如下：

<template>
  <div class="py-2">
    <div>
      <input
        type="radio"
        :id="taskData.id + 'Yes'"
        :name="taskData.name"
        value="yes"
        @change="updateData"
      />
      <label :for="taskData.id + 'Yes'">{{ taskData.name }} Yes</label>
    </div>
    <div>
      <input
        type="radio"
        :id="taskData.id + 'No'"
        :name="taskData.name"
        value="no"
        @change="updateData"
      />
      <label :for="taskData.id + 'No'">{{ taskData.name }} No</label>
    </div>
  </div>
</template>

<script>
export default {
  props: ["taskData"],
  methods: {
    updateData(e) {
      this.$emit("update-form-data", {
        id: this.taskData.id,
        // 可根据业务需求调整status的取值，这里示例用1代表Yes、0代表No
        status: e.target.value === 'yes' ? 1 : 0,
      });
    },
  },
};
</script>

同时修复了原代码中label的for属性和单选框id不匹配的问题，保证点击label可以正常选中对应单选框。

2. 完成simulateBeforeRouteLeave的判断逻辑 #

你可以用Array.every()方法遍历所有任务，判断所有任务的status都不为初始值null即可，修改后的App.vue方法代码：

simulateBeforeRouteLeave() {
  // 只要存在任意一个task的status是null，说明还有未作答的题目
  const hasUnanswered = !this.tasks.data.every(task => task.status !== null)
  if (hasUnanswered) {
    alert("请选择所有选项");
  } else {
    console.log("允许用户离开 'next()'");
    // 实际项目中这里调用路由守卫的next()方法即可
  }
},

Array.every()会在所有元素都满足判断条件时返回true，只要有一个不满足就返回false，刚好适配全量校验的场景，即使后续任务是从API动态拉取的，这段逻辑也不需要改动。

内容的提问来源于stack exchange，提问作者babis95