我在创建一个简单的民意调查生成器时学习 vue,但我在无线电输入方面遇到了问题。
问题可以有两种类型之一 - 选择或范围(两者都是无线电输入,“选择”是无线电输入单选问题,“范围”是具有 1-5 个值的无线电输入问题,如下图所示;稍后我必须修复命名...)。
问题是,当我渲染民意调查时,我有与问题一样多的无线电输入组,并且选择一个值不会检查无线电输入。
我通过 axios.get 获取包含问题和可能答案的民意调查。
模板片段:
<label>Ankieta</label>
<div class="card mb-2" v-for="question in poll.Questions">
<div class="card-header p-2">{{question.question}}</div>
<div class="card-body pb-1">
<div class="form-group" v-if="question.type === 'radio'" >
<div v-for="answer in question.QuestionAnswers">
<input type="radio" :name="'question'+question.id" v-bind:value="answer.answer" v-on:click.prevent="updateAnswer(question, answer)">
<label v-bind:for="answer.id">{{answer.answer}}</label>
</div>
</div>
<div v-else-if="question.type === 'range'">
<p class="text-muted mb-4 d-flex justify-content-center">W jakim stopniu zgadzasz się ze stwierdzeniem w pytaniu?<br/>1 - Bardzo się nie zgadzam, 3 - Neutralny/a, 5 - Bardzo się zgadzam<br></p>
<div class="form-group d-flex justify-content-center" >
<label class="radio-inline d-flex justify-content-center w-100" v-for="answer in question.QuestionAnswers">
<input type="radio" :name="'question'+question.id" v-bind:value="answer.answer" v-on:click.prevent="updateAnswer(question, answer)"><span class="text-muted font-weight-bold m-1">{{answer.answer}}</span>
</label>
</div>
</div>
</div>
</div>
Data:
data() {
return {
submission: {
email: undefined,
age: undefined,
answers: []
},
poll: {},
loading: false
}
}
更新答案:
updateAnswer(question, answer) {
let index = this.submission.answers.findIndex(q => q.questionId === question.id);
let ans = {
questionId: question.id,
answerId: answer.id
};
if(index === -1) {
this.submission.answers.push(ans);
} else {
this.submission.answers.splice(index, 1);
this.submission.answers.push(ans);
}
console.log(this.submission);
}
TL;DR:如何使单击的无线电输入“选中”?
我将数据发布到服务器,问题只是美观(用户看不到他选择的内容)。
根据我的搜索,我得出的结论是我需要为每个输入设置 v-model,但在这种情况下如何做到这一点?
无线电输入 https://i.stack.imgur.com/fR1Ip.png