Vue.js：变量未定义

Question

我发现了这个Codepen 的个性测验，它似乎是为带有 Vue 实例的 HTML 文件编写的，并试图看看我是否可以将其更改为 Vue.js 文件。在进行了一些小改动以使其与 Vue.js 一起工作后，我遇到了以下错误消息：

   45:17  error  'quiz' is assigned a value but never used  no-unused-vars
  139:19  error  'quiz' is not defined                      no-undef

我看到了一些关于分配但从未使用过的变量的先前问题，并且包括一个 console.log(quiz.title) 行，所以显然这对第一条错误消息起到了作用（我说显然是因为我现在确定这是否是解决此问题的最佳方法）。但我没有得到第二个错误。为什么没有定义“测验”？

<template>
    <div id="app" v-cloak>
        <div class="row">
            <div class="large-12 columns">
                <h1>{{ quiz.title }}</h1>
                <div class="callout">
                    <div v-for="(question, index) in quiz.questions" v-bind:key="question.id">
                        <div v-show="index === questionIndex">
                            <h3>{{ question.text }}</h3>
                            <ol>
                                <li v-for="response in question.responses" v-bind:key="response.id">
                                    <label>
                                        <input type="radio" v-bind:value="response.value" v-bind:name="index" v-model="userResponses[index]">{{response.text}}
                                    </label>
                                </li>

                            </ol>
                            <button class="secondary button" v-if="questionIndex > 0" v-on:click="prev">prev</button>
                            <button class="success button" v-on:click="next">next</button>
                        </div>
                    </div>
                <div v-show="questionIndex === quiz.questions.length">
                    <h3>Your Results</h3>
                    <p>You are: {{ score() }}</p>
                </div>

            </div>

        </div>
    </div>
</div>
</template>

<script>

export default {
  name: 'PersonalityTest',
  components: {
  },
    create() {
        window.addEventListener("load", this.onWindowLoad);
    },
    methods: {
        onWindowLoad() {
            let quiz = {
            title: 'What superhero are you?',

            questions: [{
                id: 1,
                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'
                    }
                ]
            },
            {
                id: 2,
                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'
                    }
                ]
            },
            {
                id: 3,
                text: "Who would you most hang around with?",
                responses: [{
                        text: 'Wonder Woman',
                        value: 'Superman'
                    },
                    {
                        text: 'Green Arrow',
                        value: 'The Flash'
                    },
                    {
                        text: 'Robin',
                        value: 'Batman'
                    }
                ]
            },
            {
                id: 4,
                text: "What's your favourite colour?",
                responses: [{
                        text: 'Black',
                        value: 'Batman'
                    },
                    {
                        text: 'Red',
                        value: 'The Flash'
                    },
                    {
                        text: 'Blue',
                        value: 'Superman'
                    }
                ]
            },
            {
                id: 5,
                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'
                    }
                ]
            },
        ]
    };
    console.log(quiz.title)
    },

    data: function() {
        return{
            quiz: quiz,
            questionIndex: 0,
            userResponses: Array()
        }
    },
    methods: function () {
        return{
        // 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;
            }
            }
        }
    },
}

</script>

Answer 1

问题是：您在 onWindowLoad() { 内定义 quiz 并且从不使用它（并且在该函数之外无法访问它，这就是范围）

在data 中，您尝试访问quiz - 但未定义

有四种可能的修复方法 - 从最坏到最好（在我看来），它们是

---

一个

在onWindowLoad中赋值给this.quiz，在data中声明quiz:{}

export default {
    name: 'PersonalityTest',
    components: {},
    create() {
        window.addEventListener("load", this.onWindowLoad);
    },
    methods: {
        onWindowLoad() {
            this.quiz = {
                title: 'What superhero are you?',
                questions: [ ....]
            };
        },

        data: function () {
            return {
                quiz: {},
                questionIndex: 0,
                userResponses: Array()
            }
        },
    },
    ....
}

---

两个

但是 onWindowload 没有意义

直接把测验放在数据里...quiz

export default {
    name: 'PersonalityTest',
    components: {},
    data: function () {
        return {
            quiz: {
                title: 'What superhero are you?',
                questions: [ ....]
            },
            questionIndex: 0,
            userResponses: Array()
        }
    },
    ....
}

---

三个

或者

也许更好的方法是将测验放在一个单独的文件中

import quiz from "./quiz.js";

export default {
    name: 'PersonalityTest',
    components: {},
    data: function () {
        return {
            quiz: quiz,
            questionIndex: 0,
            userResponses: Array()
        }
    },
    ....
}

和 quiz.js

export default {
    title: 'What superhero are you?',
    questions: [ ....]
};

---

四个

根据您的开发环境，您甚至可以

import quiz from "./quiz.json";

并且让 quiz.json 成为 JSON

{
    title: 'What superhero are you?',
    questions: [ ....]
}