Question

我正在做一个简单的测验。不知何故我总是有错误

“未定义Vue”

但是，实际上是在此处定义的。我不完全理解这是什么原因。网站链接为here。该脚本就在页面顶部。我试图将javascript代码用作单独的文件，但错误是相同的。我是javascript的新手，因此我们将不胜感激。

"use strict";

window.onload = function() {

  var quiz = {
    title: 'What superhero are you?',

    questions: [{
        text: "How would you describe your personality?",
        responses: [{
            text: 'Im serious and dark',
            value: 'Batman'
          },
          {
            text: 'Arrogant, but charming',
            value: 'Superman'
          },
          {
            text: 'Fun and easy going',
            value: 'The Flash'
          }
        ]
      },
      {
        text: "Why did you want to become a superhero?",
        responses: [{
            text: 'For the thrills',
            value: 'The Flash'
          },
          {
            text: 'For justice',
            value: 'Batman'
          },
          {
            text: 'For popularity',
            value: 'Superman'
          }
        ]
      },
      {
        text: "Who would you most hang around with?",
        responses: [{
            text: 'Wonder Woman',
            value: 'Superman'
          },
          {
            text: 'Green Arrow',
            value: 'The Flash'
          },
          {
            text: 'Robin',
            value: 'Batman'
          }
        ]
      },
      {
        text: "What's your favourite colour?",
        responses: [{
            text: 'Black',
            value: 'Batman'
          },
          {
            text: 'Red',
            value: 'The Flash'
          },
          {
            text: 'Blue',
            value: 'Superman'
          }
        ]
      },
      {
        text: "When do you help people?",
        responses: [{
            text: 'Every chance I can',
            value: 'The Flash'
          },
          {
            text: 'At night',
            value: 'Batman'
          },
          {
            text: 'When they need me to',
            value: 'Superman'
          }
        ]
      },
    ]
  };


  var app = new Vue({
    el: '#app',
    data: {
      quiz: quiz,
      questionIndex: 0,
      userResponses: Array()
    },
    methods: {
      // Go to next question
      next: function() {
        this.questionIndex++;
        console.log(this.userResponses);
      },
      // Go to previous question
      prev: function() {
        this.questionIndex--;
      },
      score: function() {
        //find the highest occurence in responses
        var modeMap = {};
        var maxEl = this.userResponses[0],
          maxCount = 1;
        for (var i = 0; i < this.userResponses.length; i++) {
          var el = this.userResponses[i];
          if (modeMap[el] == null)
            modeMap[el] = 1;
          else
            modeMap[el]++;
          if (modeMap[el] > maxCount) {
            maxEl = el;
            maxCount = modeMap[el];
          }
        }
        return maxEl;
      }
    }
  });
}

Answer 1

您实际上没有加载Vue。在实例化Vue之前，请确保先加载它。

您可以按照Ashish所示使用CDN加载脚本，也可以将脚本保存到本地计算机上，并将其包含在页面中。

<script src="/js/vue-2.5.22.min.js" type="text/javascript"/>

/js/vue-2.5.22.min.js是Vue位置的相对路径。

Answer 2

如果您检查源代码of your site，将看到未加载Vue的脚本。因此，未定义错误Vue。在页面顶部添加以下脚本。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

您可以阅读here，了解如何在项目中使用Vue。

为什么我的JavaScript测验无法正确加载？

2 个答案: