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

提出问题＆＃39;数组（不是对象）
一开始就提出所有问题
计算值＆＃39;问题＆＃39;将关注“当前问题”的变化。自动并相应地更新值

    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] : {}
        }
      }
    })

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();
            },     
});

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

2 个答案: