VueJs 在测验应用程序中获取问题

Question

我正在尝试构建一个简单的测验应用程序。它有一些在数据库中的问题。我正在使用 AXIOS 请求获取那些。 我正在做这样的事情：

var app = new Vue({
        el:"#app",
            data:{
                currentQuestion:0,
                question:{}
            },
            methods:{
                    next:function(){
                        this.currentQuestion+=1;
                        this.loadQuest();
                    } , 
                    loadQuest:function(){
                         axios.get('/questions').then((response)=>{
                        //console.log(response.data[this.currentQuestion]);
                        this.question = response.data[this.currentQuestion];
                       })
                    }
            },
            mounted(){
                    this.loadQuest();
                },     
    });

在这里，您可以看到每当我单击下一个问题按钮时，都会调用 loadQuest() 并向服务器发送请求。有没有什么办法不在每次点击下一个按钮时发送请求，而只是增加 currentQuestion 变量并加载下一个问题？

Answer 1

1. 将“问题”设为数组（而非对象）
2. 一开始就搞定所有问题
3. 计算值 'question' 将自动观察 'currentQuestion' 的变化并相应地更新值

const app = new Vue({ 埃尔：'#app'， 数据： { 当前问题：0， 问题： []， }, 挂载（）{ axios.get('/questions').then((response) => { // console.log(response.data[this.currentQuestion]); this.questions = response.data }) }, 方法： { 下一个 （） { this.currentQuestion += 1 } }, 计算：{ 题 （） { 返回 this.questions.length ？ this.questions[this.currentQuestion] : {} } } })

Answer 2

取决于您有多少问题，但您可以通过加载请求获取所有问题，并将它们存储在数据中声明的questions: {} 对象中。点击后直接从对象中获取问题。下面的代码示例：

var app = new Vue({
    el:"#app",
        data:{
            currentQuestion:0,
            questions:{},
            question:{}
        },
        methods:{
                next:function(){
                    this.loadNextQuest();
                    this.currentQuestion+=1;
                } , 
                loadQuest:function(){
                     axios.get('/questions').then((response)=>{
                    //console.log(response.data[this.currentQuestion]);
                    this.questions = response.data;
                   })
                },
                loadNextQuest:function(){
                    this.question = this.questions[this.currentQuestion];
                }
        },
        mounted(){
                this.loadQuest();
            },     
});