[Vuejs]-Vue.js: load component from another component in javascript during initial page load

by

0👍

✅

Remove

import collection_item from './collection_item.js';

from list.js.

Then add the collection_item.js to your 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 exposes a component globally.

This will get you past your current error. It looks like there are other errors in your template as posted.

<list items=items></list>

should be

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

Also there should be a texto property in <collection-item v-for="item in items"></collection-item>. Also, Vue will complain in development mode that there is no key when you iterate over a component.

Leave a comment