Военнослужащих Vuejs прочитать собственность
<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.
У вопроса есть решение - Посмотреть?
Ответы - Военнослужащих Vuejs прочитать собственность / Vuejs Firebase read Property
Является ответом!

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