未捕获的 ReferenceError：未定义种子答案

【问题标题】：Uncaught ReferenceError: Seed is not defined未捕获的 ReferenceError：未定义种子
【发布时间】：2020-02-02 08:28:55
【问题描述】：

我目前正在阅读全栈 vue，但我不明白为什么在这个示例中会出现此错误。

window.Seed = (function () {
    const submissions = [ 
        { 
            id: 1, 
            title: 'Yellow Pail', 
            description: 'On-demand sand castle construction expertise.', 
            url: '#', 
            votes: 16, 
            avatar: '../public/images/avatars/daniel.jpg', 
            submissionImage: '../public/images/submissions/image-yellow.png', 
        } 

    ];
    }());

这就是种子函数的所在。基本上它只是我们在示例中使用的数据库。

<!DOCTYPE html> 
<html>
    <head>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.css">
          <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"> 
         <link rel="stylesheet" href="../public/styles.css" /> 
    </head>
    <body>
        <div id="app"> 
            <h2 class="title has-text-centered dividing-header">UpVote!</h2>
            <div class="section"> 
                <article class="media"> 
                    <figure class="media-left"> 
                        <img class="image is-64x64" v-bind:src="submissions[0].submissionImage"> 
                    </figure> 
                    <div class="media-content"> 
                        <div class="content"> 
                            <p> 
                                <strong> 
                                    <a v-bind:href="submissions[0].url" class="has-text-info">
                                     {{ submissions[0].title }} 
                                    </a> 
                                    <span class="tag is-small">
                                        #{{ submissions[0].id }}
                                    </span> 
                                </strong> 
                                <br> 
                                {{ submissions[0].description }} 
                                <br> 
                                <small class="is-size-7"> Submitted by: 
                                    <img class="image is-24x24" v-bind:src="submissions[0].avatar"> 
                                </small> 
                            </p> 
                        </div> 
                    </div> 
                    <div class="media-right"> 
                        <span class="icon is-small"> 
                            <i class="fa fa-chevron-up"></i> 
                            <strong class="has-text-info">{{ submissions[0].votes }}
                            </strong> 
                        </span> 
                    </div> 
                </article> 
            </div>    
        </div>
        <script src="https://unpkg.com/vue"></script>
        <script src="./main.js"></script> 
         <script src="./seed.js"></script> 

    </body>
</html>

这是我的 index.html

new Vue({
         el: '#app',
         data: { 
            submissions: Seed.submissions 
         }
         });

最后是我的main.js，它的作用是连接index.html和seed.js。但它不起作用

【问题讨论】：

你在 main 之后加载种子，
谢谢你，你是对的，但我收到另一个错误“Uncaught TypeError: Cannot read property 'submissions' of undefined”
... 而您的 IIFE 不会返回任何内容。 window.Seed 因此是 undefined。
非常感谢我错过了“返回{提交：提交};”书上没有写

标签： javascript vue.js vuejs2

【解决方案1】：

这是您应该尝试的代码：

document.addEventListener('DOMContentLoaded', (event) => {
window.Seed = (function () {
    const submissions = [ 
        { 
            id: 1, 
            title: 'Yellow Pail', 
            description: 'On-demand sand castle construction expertise.', 
            url: '#', 
            votes: 16, 
            avatar: '../public/images/avatars/daniel.jpg', 
            submissionImage: '../public/images/submissions/image-yellow.png', 
        } 

    ];
   window.Seed.submissions = submissions;
    }());
})

并在您的 index.html 文件中添加以下代码：

new Vue({
         el: '#app',
         data: { 
            submissions: window.Seed.submissions 
         }
         });

使用它可以解决您的问题。您的代码的问题是 window.Seed had the self-invoking functionthat 不返回任何内容，因此您可以将提交的属性设置到 window.Seed 对象中。希望对你有帮助

【讨论】：

@YvanRoan 如果可行，您可以批准相同的答案。
我做了，但我的声望点太低，所以你看不到，对不起。
@YvanRoan 你必须点击当前的勾号
哎呀我没看