Javascript Vuejs-实现上一个/下一个按钮以显示调查问题

我的vuejs组件中有此代码。它将在移动应用程序上向用户显示一些调查问题

{{item.question}
{{index}}{{choice}

导出默认值{
名称：'测验'，
数据（）{
返回{
回答问题：[]
}
},
安装的（）{
front.on（'问题'，（数据）=>{
console.log（数据）
这个.$store.commit（'quizQuestions'，data）；
这是.store.commit（'contentLoaded'，true）；
});
},
计算：{
孤岛加载（）{
返回此。$store.getters.showLoader；
},
问题（）{
返回此。$store.getters.quick；
},
},
方法：{
检查答案（问题索引，选项）{
这个。回答问题。推（真）；
...
}
}
}

---

因为我想避免滚动，所以我想实现一个按钮，当点击时，将向用户显示下一个问题。因为我使用的是

v-for

，所以我不确定如何实现这一点，因为我知道

v-if

和

v-for

如果一起使用会发生冲突。有人能给我一个继续的建议吗？

你可以使用按钮。或者，如果您想将每个问题与路线连接起来，您可以更改每个问题的当前路线-您只需使用

$route.push（'surveyId/questionId'）

调用将处理程序传递到按钮。每个选项都将帮助您避免使用v-if和v-for。

我不确定swiper是否是一个好的解决方案，我不需要创建带有图像的滑块，我的vue应用程序将打包为适用于移动设备的apk，因此ux不太适合使用滑块。目前我已经找到了一个解决方法，但它不会像我预期的那样正常工作，当呈现新问题时，我的无线电输入也将保持选中状态！你可以将任何组件作为幻灯片，不仅仅是图像。我知道，但正如我所写，我认为这不是移动问答应用程序的最佳解决方案。因此，你应该尝试使用带有路线的按钮，我想。在这种情况下，我不知道如何实现它，因为我没有调查id，但问题是在加载应用程序时从后端加载的，然后在用户按下开始按钮后会显示出来。目前，我可以考虑创建一个问题组件来显示我需要将每个问题的索引传递给路由器的每个问题？