Vue.js: charger un composant depuis un autre composant en javascript lors du chargement de la page initiale

Question

Je suis vraiment nouveau sur Vue.js alors soyez patient.

Essayer de créer une page avec un composant Vue.js, qui aura d'autres composants enfants. Géré pour créer et charger le premier composant externe, mais j'ai du mal à charger l'enfant/composants internes. Le projet principal est fait en utilisant python Django et mon code est ci-dessous. Faites plusieurs tentatives avec l'instruction import, mais toujours avec un message Uncaught SyntaxError: Unexpected token import dans la console javascript. Tout le monde peut m'aider à comprendre ce que je fais de mal?

---

modèle Django:

teleconsultoria/templates/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> 

---

Liste des articles composant:

noyau/statique/core/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>` 
}); 

---

composant d'objet:

core/statique/core/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

Supprimer

import collection_item from './collection_item.js'; 

à partir de list.js.

Ajoutez ensuite le fichier collection_item.js à votre page.

<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 expose un composant globalement.

Cela vous permettra de dépasser votre erreur actuelle. Il semble qu'il y ait d'autres erreurs dans votre modèle tel que publié.

<list items=items></list> 

devrait être

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

devrait y avoir aussi une propriété texto à <collection-item v-for="item in items"></collection-item>. En outre, Vue se plaindra en mode de développement qu'il existe no key lorsque vous parcourez un composant.