VueJS模板未呈现
Posted
技术标签:
【中文标题】VueJS模板未呈现【英文标题】：VueJS Template not rendering 【发布时间】：2020-06-08 14:00:33 【问题描述】：我正在努力让我的模板组件之一进行渲染。我确信这个错误很简单，但由于我是 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>
App.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>
HeaderSection.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>
QuestionSection.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");
我的 HeaderSection 和 QuestionSection 位于 src 文件夹中的 components 文件夹中
【问题讨论】：
【参考方案1】：语法错误。一开始打开开发者工具非常有用，如果你使用像 Visual Studio Code 这样的带有 lint 检查的开发环境，它可以节省更多时间。 必须是：
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"
]
]
;
【讨论】：
谢谢大流士。不幸的是，我看不出这段代码是如何阻止我的组件呈现的。你可以给我更多的线索，可能会对此有所了解。谢谢。 错误是关闭对象结构，一些花括号和方括号太多 我明白了。那是我复制代码的时候，因为原始代码中有 21 个问题。我将编辑我的代码。我使用的代码没有额外的括号。感谢您向我指出这一点。 QuestionSection 按预期工作，可能是 CSS 问题以上是关于VueJS模板未呈现的主要内容，如果未能解决你的问题，请参考以下文章
组件已安装但模板标签未在生产环境中呈现（但在开发中呈现）： Nuxtjs Vuejs Vuetifyjs Rollupjs