Javascript 问卷单选按钮单击后取消选中

我是vue的新手，我做了一份带有单选按钮和向后导航的问卷，可以记住预览答案并将其设置为选中。但我面临一个模糊的问题

第一个版本是一组简单的单选按钮和一个发出答案的sentAnswer按钮

第二次迭代没有一个按钮和一个应答按钮。单选按钮本身附带了一个eventhandler并发出答案

两个版本都运行得很好

现在我想要一个sentAnswer按钮和一个用于单选按钮的延迟事件处理程序，单选按钮在一段时间后发出答案。代码运行良好，只是有一个bug。当我点击一个单选按钮时，它会立即被取消选中。当我移除连接到单选按钮的eventhandler时，单选按钮按预期工作

Vue.component('question', {
  template: `
<transition name="fade" mode="out-in" 
  v-on:after-leave="afterLeave">
  <div :key="question.id"> 

    <div class="Questionnaire-answers">
    <strong>Question {{ questionNumber }}:</strong><br/>
    <h2>{{ question.text }} </h2> 
      <div v-for="(choice,index) in question.choices" >
      <input type="radio" :id="'answer'+index" :name="question.id" :value="choice.value"  :data-next="choice.nextStage" @click="handleAnswer" :checked="question.lastAnswer == choice.value" ><label :for="'answer'+index">{{choice.answer}}</label><br/>
      </div>
    </div>

    <transition name="fade" mode="out-in" >
    <div v-show="errorsForm">
      <p>Please select an answer!</p>
    </div>
    </transition>
    <div class="border">
      <button v-if="question.stage !== '1'" @click="returnAnswer" class="btn btn-outline-dark btn-primary-inverted-md">Back</button>
      <!--button @click="submitAnswer" class="btn btn-danger">Answer</button-->
    </div>
    <div v-show="answerHasGiven" class="progress">
      <div class="progress-bar" style=""></div>
    </div>
  </div>
</transition>
`,
  data() {


    return {
      answerHasGiven : false,
      errorsForm: false,
      answer: null
    }
  },
  props: ['question', 'question-number'],
  methods: {
    submitAnswer: function () {
      const val = $('input:checked').val();
      if (val !== undefined) {
        this.errorsForm = false;
        this.$emit('answer', {answer: val});
      } else {
        this.errorsForm = true;
      }



    },

    handleAnswer: function () {

      this.answerHasGiven = true;
      const self = this;
      const val = $(event.target).val();
      $(event.target).prop('checked',true)
      setTimeout(function () {
        this.answerHasGiven = false;
        self.$emit('answer', {answer: val});

      }, 4000);
    },

    returnAnswer: function () {
      this.$emit('answer', {answer: "backwards"});
      this.answer = null;
    },

    afterLeave: function (el) {
      this.answerHasGiven = false;
      //$('.Questionnaire-answers input:checked').prop('checked',false);
    }
  }
})
;

Vue.component（'question'{
模板：`
问题{{questionNumber}：

{{question.text}
{{choice.answer}}

请选择一个答案

返回
`,
数据（）{
返回{
答案是：错，
错误形式：false，
回答：空
}
},
道具：['question'，'question number']，
方法：{
提交人：函数（）{
const val=$（'input:checked'）.val（）；
如果（val！==未定义）{
this.errorsForm=false；
这个.$emit（'answer'，{answer:val}）；
}否则{
this.errorsForm=true；
}
},
handleAnswer:函数（）{
this.answerhasguive=真；
const self=这个；
const val=$（event.target）.val（）；
$（event.target）.prop（'checked'，true）
setTimeout（函数（）{
this.answerhasguive=假；
self.$emit（'answer'，{answer:val}）；
}, 4000);
},
返回答案：函数（）{
这个.$emit（'answer'，{answer:“backwards”}）；
this.answer=null；
},
离职后：功能（el）{
this.answerhasguive=假；
//$（'.问卷答案输入：选中'）.prop（'checked'，false）；
}
}
})
;

afterLeave功能似乎不是问题，因为在选中单选按钮时从未调用过它。我用调试器试过了

当组件被调用时，它会得到一个带有问题、答案和值的questionobject。如果此问题已在上次回答，则预设单选按钮

---

我是vue的新手，所以我是舒尔。这可能不是一个完美的方法，但欢迎任何建议

最后我发现了我的错误

在这一行：

<input type="radio" :id="'answer'+index" :name="question.id" :value="choice.value"  :data-next="choice.nextStage" @click="handleAnswer" :checked="question.lastAnswer == choice.value" ><label :for="'answer'+index">{{choice.answer}}</label><br/>

Vue正在根据此设置单选按钮的当前活动状态。如果对每个新问题都未设置LastA答案，则此条件将评估为false，且单选按钮未选中

换句话说，vue根据此变量的当前值设置单选按钮的选中状态。它只是覆盖了一切

这个问题的简单解决方法是为lastAnswer提供最后单击的元素的当前值

    handleAnswer: function () {

  if (!this.answerHasGiven) {
    const self = this;
    const val = $(event.target).val();
    this.question.lastAnswer = val;
    $(event.target).prop('checked', true);
    this.answerHasGiven = true;
    setTimeout(function () {

      self.$emit('answer', {answer: val});

    }, 1000);
  }
},

---

感谢您的时间。

在设置超时内，将其设置为

self.answerhasgeive=false那一定是破坏了你的代码。谢谢，我检查过了，但它不能解决问题。
    handleAnswer: function () {

  if (!this.answerHasGiven) {
    const self = this;
    const val = $(event.target).val();
    this.question.lastAnswer = val;
    $(event.target).prop('checked', true);
    this.answerHasGiven = true;
    setTimeout(function () {

      self.$emit('answer', {answer: val});

    }, 1000);
  }
},