Анкета Радио кнопка снимается после нажатия

Question

Я совсем новичок в vue и сделал анкету с переключателями и обратной навигацией, которая запоминает предварительный ответ и устанавливает его отмеченным. Но я сталкиваюсь с неясной проблемой.

Первая версия была с простым набором радиокнопок и кнопкой отосланного ответа, которые выдают ответ.

Вторая итерация была без кнопки отправки и ответа. К самой радиокнопке прикреплен обработчик событий, и он выдает ответ.

Обе версии работали довольно хорошо.

Теперь я хочу иметь и кнопку sentAnswer, и обработчик событий с задержкой для переключателей, который выдает ответ через определенное время. Код работает нормально, за исключением ошибок. Когда я нажимаю переключатель, он сразу же отключается. Когда я удалил обработчик событий, прикрепленный к переключателю, переключатель работал как положено.

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);
    }
  }
})
;

Функция afterLeave, похоже, не является проблемой, потому что она никогда не вызывалась во время проверки переключателя. Я попробовал это с отладчиком.

Когда компонент вызывается, он получает объект вопроса с вопросом, ответом и значениями. Если на этот вопрос уже был дан ответ, то последний ответ предварительно устанавливает переключатель.

Я совсем новичок в Vue, поэтому я уверен, что это может быть не идеальный подход, но любой совет приветствуется.

Answer 1

Наконец-то я нашел свою ошибку.

именно в этой строке:

<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/>

Радиокнопка отменяет выбор из-за этого условия:

:checked="question.lastAnswer == choice.value"

Vue isустановка текущего активного состояния переключателя в соответствии с этим.Если lastaAnswer не установлен, как и для каждого нового вопроса, это условие переходит в 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);
  }
},

Спасибо за время.