Question

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

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

第二次迭代没有，并带有sendAnswer按钮。单选按钮本身装有事件处理程序，并发出答案。

两个版本都运行良好。

现在，我要同时具有sendAnswer Button和单选按钮的延迟事件处理程序，该单选按钮在特定时间后会发出答案。该代码工作正常，除了错误。当我单击单选按钮时，此后立即取消选中。当我卸下连接到单选按钮的事件处理程序时，单选按钮将按预期工作。

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正在根据此设置单选按钮的当前活动状态。如果未设置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);
  }
},

感谢您的时间。

单击后取消问卷单选按钮

1 个答案: