如何加載<script> part of a Vuejs single file component before <template>

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警告]：渲染組件輪播時出錯：...

vue.js？3de6：2229未捕獲的TypeError：無法讀取未定義的屬性'content'

我已經使用了很長時間，因為它是在加載數據並將其替換到模板中之后將其加載，但是在我嘗試安裝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' 。 它將很好地工作。