Question

关于我问过这里的问题，我意识到我的问题可能是因为在脚本之前加载了模板，当它收到未定义变量的错误时，它会阻止脚本运行。如果是这种情况那么可能是因为 use strict ，它位于我的node_modules中而不是我的代码中。

＆＃xA;＆＃xA;

我的组件看起来像这个：

＆＃xA;＆＃xA;

 ＆lt; style lang =“sass”＆gt;＆＃xA; .hero {＆＃xA;颜色：白色;＆＃xA; padding-top：10em;＆＃xA; }＆＃XA; .image {＆＃xA;背景：不重复;＆＃xA; background-size：100％100％;＆＃xA;身高：600px;＆＃xA; box-shadow：inset 0 0 0 2000px rgba（0,0,50,0.3）;＆＃xA; }＆＃XA;＆LT; /风格＆GT;＆＃XA;＆＃XA;＆LT;模板＆GT;＆＃XA; ＆lt; div：style =“{backgroundImage：'url（'+ components.carousel.content.image +'）'}”class =“image”＆gt;＆＃xA; ＆lt; div class =“row hero”＆gt;＆＃xA; ＆lt; div class =“small-8 medium-6 columns”＆gt;＆＃xA; ＆lt; h2＆gt;欢迎使用＆lt; strong＆gt; {{components.site.name}}＆lt; / strong＆gt;＆＃xA; ＆LT峰; br /＆GT; {{components.carousel.content.tag_line}}＆LT; / H2＆GT;＆＃XA; ＆LT峰; br＆GT;＆＃XA;＆＃XA; ＆LT p为H.;＆＃XA; {{components.carousel.content.perks_1}}＆amp; nbsp; | ＆安培; NBSP;＆＃XA; {{components.carousel.content.perks_2}}＆amp; nbsp; | ＆安培; NBSP;＆＃XA; {{components.carousel.content.perks_3}}＆＃XA; ＆LT; / P＆GT;＆＃XA; ＆LT; / DIV＆GT;＆＃XA; ＆LT; / DIV＆GT;＆＃XA; ＆LT; / DIV＆GT;＆＃XA;＆＃XA;＆LT; /模板＆GT;＆＃XA;＆＃XA;＆LT;脚本＆GT;＆＃XA;从'../mixin';＆＃xA;＆＃xA;导入主页混音; export default {＆＃xA; mixins：[homepageMixin]，＆＃xA;＆＃xA; data：function（）{＆＃xA;返回{＆＃xA;组件：''＆＃xA; }＆＃XA; }＆＃XA; }＆＃xA;＆＃xA;＆lt; / script＆gt;＆＃xA;

＆＃xA;＆＃xA;

当我加载时出现此错误：

＆ #xA;＆＃XA;

＆＃XA;
[Vue警告]：渲染组件轮播时出错：＆＃xA; ...
＆＃XA; ＆＃XA;
vue.js？3de6：2229 Uncaught TypeError：无法读取＆＃xA的属性'content'; undefined
＆＃xA;

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

＆ #xA;
var g; \ r \ n \ r \ n //这适用于非严格模式\ r \ n \ = =（function（）{return this;}）（）;
＆＃xA; < / blockquote>＆＃xA;＆＃xA;
解决方案是首先加载脚本，以便在加载模板时数据可用。我怎么能这样做？
＆＃xA;

Answer 1

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

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

1 个答案: