如何在 <template> 之前加载 Vuejs 单文件组件的 <script> 部分

Question

关于我问的问题，我意识到我的问题可能是因为模板在脚本之前被加载，当它得到一个变量未定义的错误时，它停止了来自运行的脚本。如果是这样，那可能是因为 use strict 在我的 node_modules 而不是我的代码中的某个地方。

我的组件如下所示：

<style lang="sass">
    .hero {
        color: white;
        padding-top: 10em;
    }
    .image {
        background: no-repeat;
        background-size: 100% 100%;
        height: 600px;
        box-shadow:inset 0 0 0 2000px rgba(0,0,50,0.3);
    }
</style>

<template>
    <div :style="{ backgroundImage: 'url(' + components.carousel.content.image + ')' }" class="image">
        <div class="row hero">
            <div class="small-8 medium-6 columns">
                <h2>Welcome to <strong>{{components.site.name}}</strong>
                    <br/> {{components.carousel.content.tag_line}}</h2>
                <br>

                <p>
                    {{components.carousel.content.perks_1}} &nbsp; | &nbsp;
                    {{components.carousel.content.perks_2}} &nbsp; | &nbsp;
                    {{components.carousel.content.perks_3}}
                </p>
            </div>
        </div>
    </div>

</template>

<script>
    import homepageMixin from '../mixin';

    export default {
        mixins: [homepageMixin],

        data: function () {
            return {
                components: ''
            }
        }
    }

</script>

加载时出现此错误：

[Vue warn]: Error when rendering component carousel: ...

vue.js?3de6:2229 Uncaught TypeError: Cannot read property 'content' of undefined

我已经这样使用它很长时间了，因为它会在之后加载数据并在模板中替换它，但是在我尝试安装 babel 之后，它现在以某种方式强制执行 use strict。当我检查编译后的 JS 文件前后的差异时，我意识到这一行在底部，但现在它在我的组件之前编译在顶部。

var g;\r\n\r\n// This works in non-strict mode\r\ng = (function() { return this; })();

一种解决方案是先加载脚本，以便在加载模板时数据可用。我该怎么做？

Answer 1

如果您调用 components.carousel 不会有问题，但您正在尝试嵌套未定义的属性。这与 VueJS 问题无关。但是，最好将所有可以未定义的内容都放在 v-if 相关项下。在您的情况下，在您的顶级节点元素上使用 v-if='components.carousel' 。到时候效果会很好。

如何在 <template> 之前加载 Vuejs 单文件组件的 <script> 部分

How to load the <script> part of a Vuejs single file component before <template>

javascript

vue.js

vue-component

vuejs2