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 / componentes_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';

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

应该是

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

texto中也应该有<collection-item v-for="item in items"></collection-item>个属性。此外，在迭代组件时，Vue会在开发模式中抱怨no key。

Vue.js：在初始页面加载期间从javascript中的另一个组件加载组件

1 个答案: