After posing my query here, I have come to the realization that the root of my problem might be due to the template loading before the script. This causes an error when it encounters an undefined variable, halting the script execution. The issue could potentially stem from the presence of use strict in one of my node_modules rather than my actual code.
Here is a snippet of how my components are structured:
<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}} |
{{components.carousel.content.perks_2}} |
{{components.carousel.content.perks_3}}
</p>
</div>
</div>
</div>
</template>
<script>
import homepageMixin from '../mixin';
export default {
mixins: [homepageMixin],
data: function () {
return {
components: ''
}
}
}
</script>
Loading results in the following error message:
[Vue warn]: Error when rendering component carousel: ...
vue.js?3de6:2229 Uncaught TypeError: Cannot read property 'content' of undefined
In the past, this setup worked fine as the data was loaded post-facto and populated in the template afterwards. However, after attempting to integrate babel, the enforcement of use strict now seems to be causing issues. Upon inspecting the compiled JS files pre and post installation, I noticed that a particular line which used to be at the bottom is now being compiled at the top prior to my components.
var g;\r\n\r\n// This works in non-strict mode\r\ng = (function() { return this; })();
To resolve this, one potential solution would be to load the script first so that by the time the template is loaded, the necessary data is readily available. How can I go about achieving this?