Javascript 分页调查（Vue.js，BootstrapVue）不'；无法获取所选项目

我用Vue.js创建了一个分页的调查，但它需要修复。 我正在使用bootstrap vue中的单选按钮组。 出于某种原因，当选择某个答案时，不会将任何内容按入我选择的数组，就像引导单选按钮一样

• 我不管你选择哪个答案，它总是最后一个被检查的按钮。 有人能帮我修一下吗？ 这是一个密码笔：

我的代码如下：

<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>

---

这里不确定-你能让JSFIDLE工作吗？但看起来v型车有问题。您正在对所有问题使用单个

selected

属性。您可能不应该在v-for中使用v-model，而应该使用一些自定义逻辑：value和@onchange。但这只是猜测。

嗨！我添加了代码笔的例子，希望可以

<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',
              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
            }
          ]
        }
]