<script>の前にVuejsの単一ファイルコンポーネントの一部をロードする方法<template>

Question

質問には私はhereと尋ねました。私の問題は、スクリプトがスクリプトの前にロードされていて、変数が定義されていない場合は、スクリプトの実行を停止します。それが当てはまる場合は、use strictが私のnode_modulesのどこかにあり、私のコードではないからでしょう。

私のコンポーネントは次のようになります。

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

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

それが後にデータをロードしたとして、私は長い間そのようにそれを使用していた：私はこのエラーを取得するロードすると

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

それをテンプレートに置き換えてしまいましたが、バベルをインストールしようとしたら、何とかuse strictを強制します。前後にコンパイルされたJSファイルの違いを確認すると、この行が最下位にあることがわかりましたが、現在はコンポーネントの前に一番上にコンパイルされています。

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

解決策は、最初にスクリプトをロードして、テンプレートがロードされるまでにデータが利用できるようにすることです。どうやってやるの？

Answer 1

components.carouselを呼び出すと問題はありませんが、未定義のネストされたネストされたプロパティを取得しようとしています。 VueJSの問題については何もありません。 しかし、未定義のすべてをv-ifに関連付けることをお勧めします。あなたの場合、最上位のノード要素にv-if='components.carousel'を使用してください。それはうまくいくでしょう。