javascript - 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({
      el: '#app',
      data: {
        currentQuestion: 0,
        questions: [],
      },
      mounted() {
        axios.get('/questions').then((response) => {
          // console.log(response.data[this.currentQuestion]);
          this.questions = response.data
        })
      },
      methods: {
        next () {
          this.currentQuestion += 1
        }
      },
      computed: {
        question () {
          return this.questions.length ? this.questions[this.currentQuestion] : {}
        }
      }
    })