如何在 Vue.js 中使用 Javascript 生成器?

amb*_*web 5 javascript generator vue.js

我正在开发一个调查模块。我使用 Vue.js,我想知道如何在 Vue 中使用 javascript 生成器。

设想

场景如下,调查的问题和答案存储在mysql数据库中。我用 Axios 调用这个数据库,以便问题和答案存储在变量 response.data 中。

预期行为

我的目标是使用生成器函数显示单个问题及其答案选择,然后单击按钮显示下一个问题及其答案。

对于定向,最终结果在功能上应类似于以下来自 hotjar 的反馈民意调查: https: //www.hotjar.com/feedback-polls/

代码

Vue.component("frage", {
 props: ["frage"],
 template: "<h3> {{ frage }} </h3>",
});

let app = new Vue({
 el: "#app",
 data: {
   auswahl: [],
   picked: [],
   fragen: [],
   antworten: [],
   frage: [],
   count: 0,
   pool: [],
   gen: [],
 },

 mounted: function () {
   this.getAllFragen();
   this.gene();
 },

 methods: {
   Addcount: function () {
     console.log(this.fragen[this.count].quest);
     this.count += 1;
     let auswahl = this.fragen[this.count];
     this.frage = auswahl.quest;
     app.antworten = auswahl.answer;
   },

   werter: function () {
     this.pool.push(this.picked);
   },

   handler: function () {
     if (this.count <= this.fragen.length) {
       this.Addcount();
       this.werter();
       console.log(this.fragen.length);
     } else {
       console.log("No Handler");
     }
   },
   getAllFragen: function () {
     axios
       .post("../controller/readAdmin2Data.php")
       .then(function (response) {
         console.log(response.data);
         app.frage = response.data[app.count].quest;
         app.fragen = response.data;

         app.antworten = response.data[app.count].answer;
       })
       .catch(function (error) {
         console.log(error);
       });
   }
 }

 

});
Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
Run Code Online (Sandbox Code Playgroud)