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

Posted 2023-02-23

【中文标题】点击后问卷单选按钮取消选中

【英文标题】：Questionnaire Radio button unchecks after click

【发布时间】：2019-01-31 03:51:57

【问题描述】：

我对 vue 很陌生，并且做了一个带有单选按钮和向后导航的问卷，它记住了预览答案并将其设置为选中。但我面临一个晦涩难懂的问题。

第一个版本带有一组简单的单选按钮和一个发送答案的 sendAnswer 按钮。

第二次迭代没有sentAnswer 按钮。单选按钮本身附加了一个事件处理程序并发出答案。

两个版本都运行良好。

现在我想为单选按钮设置一个 sendAnswer 按钮和一个延迟的事件处理程序，它们会在一定时间后发出答案。该代码工作正常，除了错误。当我单击一个单选按钮时，它会立即取消选中。当我删除附加到单选按钮的事件处理程序时，单选按钮按预期工作。

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 函数似乎不是问题，因为在选中单选按钮时它从未调用过。我用调试器试过这个。

当组件被调用时，它会得到一个包含问题、答案和值的问题对象。如果这个问题已经回答了 lastanswer 预设单选按钮。

我对 vue 很陌生，所以我确信这可能不是完美的方法，但欢迎任何建议。

【问题讨论】：

在 setTimeout 中，将其设为 self.answerHasGiven = false;，这肯定会破坏您的代码。

谢谢，我查过了，但没有解决。

【参考方案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 正在根据此设置单选按钮的当前活动状态。如果未设置每个新问题的 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);
  
,

感谢您的时间。