lit-html单选按钮未更新异常问题求助

问题场景 #

我开发的Quiz Editor存在以下两种操作流程结果不一致的问题：

• 操作流程1：点击「+ Add question」添加新问题，表单默认显示2个空答案；选中第二个单选按钮后删除第一个答案，第二个答案变为首个，单选选中状态保留，流程正常。
• 操作流程2：点击「+ Add answer」添加新答案，选中第二个单选按钮后删除第一个答案，第二个答案变为首个，但单选选中状态丢失，按钮变为未选中。
  相关代码位于src/views/editor.js和src/views/answers.js。

异常原因 #

核心问题是单选按钮的选中状态绑定逻辑未统一，部分场景依赖答案的数组下标而非答案对象本身的属性：

1. 流程1中默认生成的答案，大概率绑定了答案对象自身的选中状态属性（如isCorrect），删除第一个答案后，剩余答案的属性值未被改变，因此选中状态得以保留。
2. 流程2中通过「+ Add answer」新增的答案，其单选选中状态可能直接绑定了数组下标（如selectedAnswerIndex）。当删除下标为0的答案后，原第二个答案的下标从1变为0，但代码中未同步更新选中下标值，导致原选中下标（1）超出当前数组的有效下标范围，最终没有单选按钮处于选中状态。

解决方案 #

方案1：绑定答案对象的独立选中属性（推荐） #

为每个答案对象添加唯一标识和独立的选中状态字段，将单选按钮的选中状态直接绑定到该字段，彻底摆脱对数组下标的依赖：

1. 定义统一的答案对象结构：

   // 生成新答案的函数
   function createNewAnswer() {
     return {
       id: `answer_${Date.now()}_${Math.floor(Math.random() * 10000)}`, // 唯一ID
       content: '',
       isCorrect: false // 独立的选中状态属性
     };
   }
   

2. 单选按钮的v-model绑定到对应答案的isCorrect属性（以Vue为例）：

   <div v-for="(answer, index) in answers" :key="answer.id">
     <input type="radio" :name="`question-${question.id}`" v-model="answer.isCorrect" />
     <input type="text" v-model="answer.content" />
     <button @click="deleteAnswer(index)">删除</button>
   </div>
   

这种方式下，无论答案的顺序或数量如何变化，只要答案对象存在，其选中状态就会被保留。

方案2：同步更新选中下标（适配现有下标绑定逻辑） #

如果暂时无法修改数据结构，可在删除答案时同步调整选中下标：

function deleteAnswer(deleteIndex) {
  const { selectedAnswerIndex, answers } = this;
  // 处理选中下标同步
  if (selectedAnswerIndex === deleteIndex) {
    // 删除的是当前选中的答案，若剩余答案则选中第一个，否则清空
    this.selectedAnswerIndex = answers.length > 1 ? 0 : null;
  } else if (deleteIndex < selectedAnswerIndex) {
    // 删除的下标在选中下标之前，选中下标减1
    this.selectedAnswerIndex -= 1;
  }
  // 执行删除操作
  answers.splice(deleteIndex, 1);
}

方案3：统一答案初始化逻辑 #

确保「+ Add question」默认生成答案和「+ Add answer」新增答案使用完全相同的初始化函数，避免两种流程下答案数据结构不一致导致的绑定逻辑异常。

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