Vue.js：初期ページの読み込み中にjavascript内の別のコンポーネントのコンポーネントを読み込みます

Question

Vue.jsの新機能です。

他の子コンポーネントを持つVue.jsコンポーネントを含むページを作成しようとしています。最初の外部コンポーネントを作成してロードするように管理されていますが、子/内部コンポーネントをロードするのに問題があります。メインプロジェクトはPython Djangoを使用して作成され、私のコードは以下の通りです。 import命令でいくつか試行しましたが、JavaScriptコンソールでは常にUncaught SyntaxError: Unexpected token importというメッセージでエンディングしています。誰でも私が間違っていることを理解するのを助けることができますか？

---

Djangoテンプレート：アイテム・コンポーネントの

teleconsultoria /テンプレート/ teleconsultoria/registro_consultoria_0800.html

... 
      <div class="col s12 bibliografia"> 
      <div class="row" id="caixa-de-referencias"> 
       <div class="input-field col s6"> 
       <textarea id="textarea-bibliografia" class="materialize-textarea"></textarea> 
       <label for="textarea-bibliografia">Bibliografia</label> 
       </div> 

       <list items=items></list> 

      </div> 
      </div> 
... 

<script src="https://unpkg.com/vue"></script> 
<script src="{% static 'core/js/componentes_vue/list.js' %}"></script> 
<script> 
var appts2 = new Vue({ 
    el: '#caixa-de-referencias', 
    data: { 
    items: [ 
     'referenciA 1', 
     'referenciA 2', 
    ] 
    } 
}); 
</script> 

---

リスト：

コア/静的/コア/ js/co mponentes_vue/list.js

import collection_item from './collection_item.js'; 

var list = Vue.component('list', { 
    props: ['items'], 
    template: ` 
    <div class="col s6"> 
     <div class="search"> 
     <div class="search-wrapper"> 
      <input id="search-bibliografia" placeholder="Referências (sugestões)"> 
      <i class="material-icons">search</i> 
     </div> 

     <ul class="collection with-header search-results"> 
      <li class="collection-header"><p>Sugestões baseadas na "hipotese"</p></li> 
      <collection-item v-for="item in items"></collection-item> 
     </ul> 
     </div> 
    </div>` 
}); 

---

アイテム成分：

コア/静的/コア/ JS/componentes_vue/collection_item.js

var collectionItem = Vue.component('collection-item', { 
    props: ['texto'], 
    template: ` 
    <li class="collection-item"> 
     <div> 
     <a href="#!" class="link-inserir tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip"> 
      {{ texto }} 
     </a> 
     <a href="#!" class="secondary-content" target="_blank"> 
      <i class="material-icons">launch</i> 
     </a> 
     </div> 
    </li>` 
}); 

Answer 1

import collection_item from './collection_item.js'; 

を削除

from list.js

次に、collection_item.jsをページに追加します。

<script src="https://unpkg.com/vue"></script> 
<script src="{% static 'core/js/componentes_vue/collection_item.js' %}"></script> 
<script src="{% static 'core/js/componentes_vue/list.js' %}"></script> 
<script> 
var appts2 = new Vue({ 
    el: '#caixa-de-referencias', 
    data: { 
    items: [ 
     'referenciA 1', 
     'referenciA 2', 
    ] 
    } 
}); 
</script> 

Vue.componentは、コンポーネントグローバルを公開します。

これにより、現在のエラーが発生しなくなります。投稿されたテンプレートには他のエラーがあるようです。

<list items=items></list> 

も<collection-item v-for="item in items"></collection-item>でtextoプロパティがあるはず

<list v-bind:items="items"></list> 

でなければなりません。また、コンポーネントを反復処理するときに、Vueは開発モードでno keyが存在すると不平を言います。