javascript - Vuejs Firebase 读取属性

Question

<template>
<div id="app">
<h1 id="title">{{ quiz.title }}</h1>
  <div id="ques" v-for="(question, index) in quiz.questions" :key="question.text">
    <div v-show="index === questionIndex">
    <div id="tFlex">
      <p id="indexStuff">{{index+1}}</p>
      <h2 id="quest">{{ quiz.question.text }}</h2>
    </div>
      <ol>
        <li id="choices" v-for="response in question.responses" :key="response.text">
          <label>
            <input id="responce" type="radio" v-bind:value="response.correct" v-bind:name="index" v-model="userResponses[index]">
            <span class="t">{{response.text}}</span>
          </label>
        </li>
      </ol>
      <div id="btns">
        <button id="prevbtn" v-if="questionIndex > 0" v-on:click="prev">Previous Question</button>
        <button id="nxtbtn" v-on:click="next">Next Question</button>
      </div>
    </div>
  </div>
  <div v-show="questionIndex === quiz.questions.length">
    <h2 id="fint">Quiz finished</h2>
    <p id="sct">Total score: {{ score() }} / {{ quiz.questions.length }}</p>
    <div id="btnFlex"> 
      <button id="chck" v-show="questionIndex === quiz.NumQuestions" v-on:click="check">Check Answers</button>
    </div>
  </div>
</div>
</template>

<script>
import { db } from './firebase';

const DefaultPath = 'quiz/01';

var Quiz;

db.doc(DefaultPath).get().then((doc) => {
  Quiz = doc.data();
});

const quiz = Quiz;

console.log(quiz);

export default {
  data() {
    return{
      quiz:quiz,
      questionIndex: 0,
      canDo: true,
      userResponses:Array(quiz.questions.length).fill(false),
    }
  },
  methods: {
  next: function() {
    this.questionIndex++;
  },
  prev: function() {
    this.questionIndex--;
  },
  score: function() {
    return this.userResponses.filter(function(val) { return val }).length;
  },
  check: function() {
      this.questionIndex = 0;
      this.canDo = false;
      this.$forceUpdate();
  },
  cando: function() {
    return {canDo:!this.canDo};
  },
}, 
}
</script>

<style>
@import './style.css';
</style>

我对 Vue.js 有这个奇怪的问题。我对 Vue.js 和 web firebase 很陌生。

我在 Chrome 开发者工具中给出了这个奇怪的错误。我正在尝试使用 Firebase 制作一个测验应用程序。我也尝试过先做 Firestore 的事情，然后做数据功能。我是 vuejs 的新手。

标签： javascripthtmlcssfirebasevue.js

Answer 1

我认为您实际上并没有在测验中存储任何内容。除其他问题外。但这里是你如何获取一个集合并存储它。

<script>

  import firebase from 'firebase'
  export default {
    data: function() {
      return {
        quiz: [],
      }
    },

    firestore() {
      return {
        quiz: firebase.collection('Collection name here')
      }
    },
   
  }
</script>

如果您需要集合中的特定文档，那么

<script>

  import firebase from 'firebase'
  export default {
    data: function() {
      return {
        quiz: [],
      }
    },

    firestore() {
      return {
        quiz: firebase.collection('Collection name here').doc('doc id here')
      }
    },
   
  }
</script>