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

Question

关于我问here 的问题，我意识到我的问题可能是因为模板在脚本之前加载，并且当它收到未定义变量的错误时，它会停止脚本运行。如果是这种情况，那么可能是因为 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 警告]：渲染组件轮播时出错： ...

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

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

var g;\r\n\r\n// 这在非严格模式下工作\r\ng = (function() { return this; })();

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

Answer 1

如果您调用components.carousel 不会有问题，但是您正在尝试获取嵌套未定义的嵌套属性。这与 VueJS 问题无关。 但是，最好将所有可能未定义的内容放在v-if 相关下。在您的情况下，在您的顶部节点元素上使用 v-if='components.carousel' 。然后它会很好地工作。