swiper动态渲染视图，解决答题问题

最近做项目碰到这样一个需求，当当前题目没答的时候，不能进入下一题，而我用的组件是swiper，swiper没有类似阻止滑动的属性，于是只能自己想了.......问题的解决思路就是动态渲染题目，并且过滤掉第一道题，当第一道题答完才渲染第二道题，以此类推，直至渲染全部题目，我们可以采用vue的计算属性，动态渲染题目

  computed: {
    answeredSubject() {
      // 根据答案列表过滤出已答题目，从第二道题开始，跳过第一道题
      return this.subject.filter((item, index) => index === 0 || !!this.answerlist[index - 1]);
    },
  },

完整代码如下

<template>
  <view class="content">
    <!--    swiper整屏滑动-->
    <swiper :vertical="true" class="swiper" :current="activeIndex" @change="swiperChange">
      <swiper-item class="swiper-item" v-for="(item,index) in answeredSubject"    :key="index">
        <view style="padding: 32rpx">
          <view class="title">{{ item.title }}</view>
          <view class="option A" :class=" answerlist[index] == 'A'? 'selected':'' " @click="answer(index,'A')">
            {{ item.one }}
          </view>
          <view style="width: 400rpx;height: 700rpx;"></view>
          <view class="option B" :class="answerlist[index] == 'B'? 'selected':'' " @click="answer(index,'B')">
            {{ item.two }}
          </view>
        </view>
        <view class="footer">向上滑動</view>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
export default {
  data() {
    return {
      subject: [
        {
          no: 1,
          title: '（1/12）美食展會上，路人手上的美食吸引了你，你會？',
          one: 'A.攔住路人問出是哪家店',
          two: 'B.記住食物的樣子逐個攤位尋找',
        },
        {
          no: 2,
          title: '（2/12）你的朋友突然說要去吃火鍋，你會？',
          one: 'A.立刻跟著朋友去',
          two: 'B.先去看看有沒有其他更好吃的',
        },
        {
          no: 3,
          title: '（3/12）你的朋友突然說要去吃火鍋，你會？',
          one: 'A.立刻跟著朋友去',
          two: 'B.先去看看有沒有其他更好吃的',
        },
        {
          no: 4,
          title: '（4/12）你的朋友突然說要去吃火鍋，你會？',
          one: 'A.立刻跟著朋友去',
          two: 'B.先去看看有沒有其他更好吃的',
        },
        {
          no: 5,
          title: '（5/12）你的朋友突然說要去吃火鍋，你會？',
          one: 'A.立刻跟著朋友去',
          two: 'B.先去看看有沒有其他更好吃的',
        },
      ],
      activeIndex: 0,//当前显示的swiper索引
      answerlist: [
 
      ]
    }
  },
  computed: {
    answeredSubject() {
      // 根据答案列表过滤出已答题目，从第二道题开始，跳过第一道题
      return this.subject.filter((item, index) => index === 0 || !!this.answerlist[index - 1]);
    },
  },
  onLoad() {
    console.log(this.answeredSubject)
  },
  methods: {
    answer(index, selectedOption) {
      // 填充答案列表，确保答案与题目一一对应
      while (this.answerlist.length <= index) {
        this.answerlist.push(null); // 填充空答案
      }
      // 更新用户的答案
      this.answerlist[index] = selectedOption;
      this.$forceUpdate();//强制刷新视图
      // 输出答案列表，用于调试
      console.log(this.answerlist);
      console.log(this.answeredSubject,'123123')
      // 在这里可以执行下一题的逻辑，例如滑动到下一题
      // 示例代码：this.swiper.slideTo(index + 1); // 假设您有一个名为 swiper 的 swiper 实例
    },
    swiperChange(e) {
      this.activeIndex = e.detail.current
    }
  }
}
</script>
 
<style lang="scss">
.content {
  width: 100%;
  height: 100vh;
 
  .swiper {
    width: 100%;
    height: 100vh;
 
    .swiper-item {
      width: 100%;
      height: 100vh;
 
      .title {
        font-size: 40rpx;
        margin-top: 80px;
      }
 
      .option {
        font-size: 35rpx;
        margin-top: 40rpx;
      }
 
      .selected {
        color: #007aff;
      }
 
      .A {
        float: left;
      }
 
      .B {
        float: right;
      }
 
      .footer {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: #333;
        color: #fff;
        padding: 20rpx 40rpx;
        border-radius: 10rpx;
        animation: slide-up 1.5s infinite alternate;
      }
 
      @keyframes slide-up {
        0% {
          transform: translateX(-50%) translateY(0);
        }
        100% {
          transform: translateX(-50%) translateY(-40rpx);
        }
      }
    }
  }
}
 
</style>