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

Question

In connection to the question I asked here, I have realised that my issue maybe because the template is being loaded before the script and when it gets an error that the variable is not defined, it stops the script from running. If that is the case then it's maybe because of use strict which is somewhere in my node_modules and not in my code.

My components look like this:

<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>

When I load I get this error:

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

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

I had been using it like that for a long time as it was loading the data after and replacing it in the template, but after I tried to install babel, it somehow enforces use strict now. When I check the difference between the compiled JS file before and after I realise that this line was at the bottom but now its being compiled at the top before my components.

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

A solution would be to load the script first so the by the time the template is loaded the the data is available. How can I do that?

Marek Urbanowicz · Accepted Answer · 2017-01-30 08:12:18Z

1

It wouldn't be an issue if you would call components.carousel, but you are trying to get nested property which is nested of undefined. It is nothing about VueJS issue. However, it is good practice to put everything which can be undefined under v-if related. In your case use v-if='components.carousel' on your top node element. It will work nicely then.

answered Jan 30, 2017 at 8:12

Marek Urbanowicz

13.8k19 gold badges68 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Phillis Peters Over a year ago

This works now but could you think of a reason why it worked before without the v-if

Borjante Over a year ago

You use "components.carousel.content.image" in your template but in the data property of the component you just declare components as an empty string. Therefore, on the first render of the component, you get this "trying to get a property of undefined".

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related