javascript - VueJS模板未呈现

问题描述

我正在努力让我的模板组件之一进行渲染。我确信这个错误很简单，但由于我是 VueJS 的新手，所以我很难找到解决方案。我的标题显示得很好，但我的问题组件是不可见的。任何帮助，将不胜感激。谢谢你。这是代码。索引.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>

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 文件夹中

标签： javascriptvue.jstemplatescomponents

javascript - VueJS模板未呈现

问题描述

解决方案

推荐阅读