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,一个单选按钮取消选中,为什么全部按钮包括全选按钮都取消选中了?的主要内容,如果未能解决你的问题,请参考以下文章