vue购物车出现了一个bug,一个单选按钮取消选中,为什么全部按钮包括全选按钮都取消选中了?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue购物车出现了一个bug,一个单选按钮取消选中,为什么全部按钮包括全选按钮都取消选中了?相关的知识,希望对你有一定的参考价值。

参考技术A 你的change事件是不是写错了,你可以打印看看哪个环节出错了。 参考技术B 记录复选框的状态对象没有和数据的id或者key关联起来, 不能用一个变量记录所有数据的选中状态。

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

【中文标题】点击后问卷单选按钮取消选中【英文标题】: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);
  
,

感谢您的时间。

【讨论】:

以上是关于vue购物车出现了一个bug,一个单选按钮取消选中,为什么全部按钮包括全选按钮都取消选中了?的主要内容,如果未能解决你的问题,请参考以下文章

如何取消选中或重置单选按钮?

vue取消单选按钮选中,所有类型通用简单明了

vue取消单选按钮选中,所有类型通用简单明了

vue取消单选按钮选中,所有类型通用简单明了

vue框架里边的ref='xxx' 的用法 在父组件里边操作子组件的变量 有多组单选按钮(遍历生成)每次只能选中一组

如何取消选中或清除单选按钮组?