Vue.js: Laden Komponente von einer anderen Komponente in Javascript während der ersten Seite laden

Question

Ich bin wirklich neu in Vue.js, also bitte etwas Geduld.

Der Versuch, eine Seite mit einer Vue.js-Komponente zu erstellen, die andere untergeordnete Komponenten enthalten wird. Verwaltet, um die erste äußere Komponente zu erstellen und zu laden, aber ich habe Probleme, die untergeordneten/inneren Komponenten zu laden. Das Hauptprojekt wird mit Python Django gemacht und mein Code ist unten. Mehrere Versuche mit der import Anweisung gemacht, aber immer mit einer Uncaught SyntaxError: Unexpected token import Nachricht in der Javascript-Konsole enden. Jeder kann mir helfen herauszufinden, was ich falsch mache?

---

Django Vorlage:

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 der Artikel-Komponente:

Kern/static/Kern/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>` 
}); 

---

Artikel Komponente:

Kern/statisch/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

entfernen

import collection_item from './collection_item.js'; 

von list.js.

Fügen Sie dann die Sammlung_Item.js zu Ihrer Seite hinzu.

<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 stellt eine Komponente global.

Dies wird Sie über Ihren aktuellen Fehler erhalten. Es sieht so aus, als ob in Ihrer Vorlage andere Fehler enthalten sind.

<list items=items></list> 

sollte

da sein

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

Auch eine texto Eigenschaft in <collection-item v-for="item in items"></collection-item> sein sollte. Außerdem wird sich Vue im Entwicklungsmodus beschweren, dass es no key gibt, wenn Sie über eine Komponente iterieren.