Я изо всех сил пытаюсь получить один из моих компонентов шаблона для рендеринга. Я уверен, что ошибка проста, но у меня проблемы с поиском решения, так как я новичок в VueJS. Мой заголовок отображается просто отлично, но мой компонент Вопросы невидим. Любая помощь будет оценена. Спасибо. Вот код index. html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Lionsfield Placement Quiz</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<link rel="stylesheet" type="text/css" href="/styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<style>
.is-loading {
background: cyan;
}
</style>
</head>
<body>
<div class="space-top container shadow" align="center">
<div id="app">
</div>
</div>
<script src="/index.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
Приложение. vue
<template>
<div id="app">
<HeaderSection />
<QuestionSection />
</div>
</template>
<script>
import HeaderSection from "./components/HeaderSection";
import QuestionSection from "./components/QuestionSection";
export default {
name: "App",
components: {
HeaderSection,
QuestionSection
}
};
</script>
Раздел заголовка. vue
<template>
<div>
<img class="logo" src="/img/lion.png" alt />
<h1 id="heading-top">Lionsfield English Quick Placement Quiz</h1>
</div>
</template>
<script>
export default {
name: "HeaderSection"
};
</script>
Секция вопроса. vue
<template>
<div>
<div v-for="(question, index) in quiz.questions" v-bind:key="question.id">
<div v-show="index === questionIndex">
<h2 id="question-text">{{ question.text }}</h2>
<div class="row">
<ul>
<li
class="col-sm-12 col-md-12 col-lg-6"
v-for="(response, index2) in question.responses"
v-bind:key="response.text"
>
<div class="btn-group btn-group-toggle">
<label class="btn btn-red btn-block quesion-b">
<input
type="radio"
v-bind:value="response.correct"
v-bind:name="index"
v-bind:id="index2"
v-bind:class="{ active: isActive }"
v-model="userResponses[index]"
@click="select();next();roundProg()"
checked
/>
{{response.text}}
</label>
</div>
</li>
</ul>
<div class="progress">
<div
class="progress-bar bg-red"
role="progressbar"
:style="{ width: myWidth + '%' }"
aria-valuenow="45"
aria-valuemin="0"
aria-valuemax="100"
>{{prog}}%</div>
</div>
</div>
<button
type="button"
class="btn btn-primary mb-5 btn-sm"
v-if="questionIndex > 0"
v-on:click="prev();roundProg()"
>Previous Question</button>
<!-- <button type="button" class="btn btn-primary btn-sm" v-on:click="next();roundProg()">
Next Question
</button>-->
</div>
</div>
<div v-show="questionIndex === quiz.questions.length">
<h2>You did Amazing job {{quiz.user}}!!!</h2>
<p>
<!--Total score: {{ score() }} / {{ quiz.questions.length }}-->
Total score: {{ score() }}%
</p>
</div>
</div>
</template >
<script>
let quiz = {
user: "English Learner",
questions: [
{
id: 0,
text: "What _______ your job?",
responses: [
{ text: "are" },
{ text: "is", correct: true },
{ text: "be" },
{ text: "have" }
]
},
{
id: 1,
text: "Lynn _______ at home at the moment.",
responses: [
{ text: "works" },
{ text: "is working", correct: true },
{ text: "work" },
{ text: "are working" }
]
},
{
id: 2,
text: "We have ______ information about that.",
responses: [
{ text: "a lot of", correct: true },
{ text: "an" },
{ text: "any" },
{ text: "many" }
]
}
]
};
export default {
data: function() {
return {
quiz: quiz,
questionIndex: 0,
userResponses: Array(quiz.questions.length).fill(false),
isActive: false,
myWidth: 0,
prog: 0
};
},
methods: {
roundProg: function() {
this.prog = Math.round(this.myWidth);
},
select: function() {
isActive = true;
console.log(this);
},
next: function() {
this.questionIndex++;
this.myWidth = (this.questionIndex / quiz.questions.length) * 100;
},
prev: function() {
this.questionIndex--;
this.myWidth = (this.questionIndex / quiz.questions.length) * 100;
},
score: function() {
let n =
(this.userResponses.filter(function(val) {
return val;
}).length /
quiz.questions.length) *
100;
function truncate(num, places) {
return Math.trunc(num * Math.pow(10, places)) / Math.pow(10, places);
}
return truncate(n, 2);
}
}
};
</script>
index. js
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
My HeaderSection и QuestionSection находятся в папке компонентов, расположенной в папке sr c