Военнослужащих Vuejs прочитать собственность


Военнослужащих Vuejs прочитать собственность

10.10.2020 04:04:54 Просмотров 5 Источник
<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 и веб-огневая база.

Я дал эту странную ошибку в инструментах разработчика Chrome. Я пытаюсь сделать приложение для викторины с Firebase. Я также попытался сначала сделать что-то вроде Firestore и выполнить функцию данных. Я новичок в vuejs.

The error

У вопроса есть решение - Посмотреть?

Ответы - Военнослужащих Vuejs прочитать собственность / Vuejs Firebase read Property

Является ответом!
Nora Smiley

10.10.2020 08:48:33

Я не думаю, что вы на самом деле храните что-либо в викторине. Среди прочих вопросов. Но вот как вы могли бы захватить коллекцию и сохранить ее.

<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>
Помочь в развитии проекта:
Закрыть X