分页调查Vue.js，BootstrapVue未获取所选项目

问题描述

我使用Vue.js创建了分页调查，但需要修复。 我正在使用bootstrap vue中的单选按钮组。 由于某些原因，选择了某些答案（如应该使用引导单选按钮一样）时，什么也不会压入我选择的数组中。

• 您选择哪个答案都没关系，它始终是最后一个被选中的按钮。 有人可以帮我解决吗？ 这是一个codepen： https://codepen.io/Yulya_Yu/pen/JjXMPxd

我的代码如下：

<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: [
        {
          name: 'test question 1 ????',answers: [
            {
              text: 'option 1',id: 1
            },{
              text: 'option 2',{
              text: 'option 3',{
              text: 'option 4',id: 1
            }
          ]
        },{
          name: 'test question 2 ????',{
          name: 'test question 3 ????',id: 1
            }
          ]
        }
]

解决方法

不确定此处-您可以使JSFiddle工作吗？但这似乎是v模型的问题。您正在对所有问题使用单个selected属性。您可能不应该在v-for中使用v-model，而应该使用一些自定义逻辑：value和@onchange。但这是一个猜测。