I created a paginated survey with Vue.js, but it needs fixing. I'm using radio button group from bootstrap vue. For some reason, nothing is pushed into my selected array when some answer is selected like it is supposed to with bootstrap radio buttons.
- I doesn't matter which answer you choose, it's always the last button that gets checked. Can someone help me fix it? Here is a codepen: https://codepen.io/Yulya_Yu/pen/JjXMPxd
My code is below:
<template>
<div type="survey">
<div class="survey-container">
<div class="radio-vote">
<div class="survey-question-container" >
<div class="survey-question-info">
<!-- <p>{{ question.name }}</p> -->
<p>{{ currPage + 1 }} из {{ subList.length }}</p>
</div>
<div v-for="question in filteredAnswers" :key="question.id">
{{question.name}}
<b-form-radio-group
:options="question.answers"
v-model="selected"
stacked
class="transition--fadeInRight"
:disabled="selected.length === subList.length && selected.indexOf(n) === -1"
>{{selected}}</b-form-radio-group>
</div>
</div>
<div class="survey-controls" v-if="!surveyFinished">
<div class="pagination-btns">
<button class="backwards" @click="onClickPreviousPage" :disabled="leftBtnDisabled">
</button>
<button class="forward" @click="onClickNextPage" :disabled="rightBtnDisabled">
</button>
</div>
<button class="survey-finish-btn" @click="finishSurvey" :disabled="disableBtn">
Завершить опрос
</button>
</div>
<div v-if="surveyFinished" class="survey-finish-msg">
<h3>Спасибо!</h3>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
mixins: [],
props: ['questions'],
components: {},
data() {
return {
perPage: 1,
currPage:0,
leftBtnDisabled: false,
rightBtnDisabled: false,
subList: [],
surveyFinished: false,
selected: [],
disableBtn: false,
questionAnswers: []
}
},
created: function () {
this.setAnswerPages()
},
mounted() {
},
methods: {
setAnswerPages() {
for (let i = 0; i < Math.ceil(this.questions.length / this.perPage); i++) {
this.subList[i] = this.questions.slice(
i * this.perPage,
i * this.perPage + this.perPage
)
}
this.leftBtnDisabled = this.currPage === 0
},
onClickPreviousPage() {
if (this.currPage > 0) {
this.currPage--
}
},
onClickNextPage() {
if (this.currPage < this.subList.length - 1) {
this.currPage++
}
},
finishSurvey() {
this.surveyFinished = true
},
},
computed: {
filteredAnswers() {
return this.subList[this.currPage]
}
},
watch: {
currPage() {
if (this.currPage === this.subList.length - 1) {
this.rightBtnDisabled = true
} else if (this.currPage < this.subList.length - 1) {
this.rightBtnDisabled = false
}
this.leftBtnDisabled = this.currPage === 0
},
selected() {
if (this.selected.length === this.subList.length) {
this.disableBtn = false
}
}
},
validations: {}
}
</script>
questions props looks like this:
questions: [
{
name: 'test question 1 ????',
answers: [
{
text: 'option 1',
id: 1
},
{
text: 'option 2',
id: 1
},
{
text: 'option 3',
id: 1
},
{
text: 'option 4',
id: 1
}
]
},
{
name: 'test question 2 ????',
answers: [
{
text: 'option 1',
id: 1
},
{
text: 'option 2',
id: 1
},
{
text: 'option 3',
id: 1
},
{
text: 'option 4',
id: 1
}
]
},
{
name: 'test question 3 ????',
answers: [
{
text: 'option 1',
id: 1
},
{
text: 'option 2',
id: 1
},
{
text: 'option 3',
id: 1
},
{
text: 'option 4',
id: 1
}
]
}
]
