VueJS <script>Шаблон - Опора не определена в скобках усов - PullRequest
Новая
       29

VueJS <script>Шаблон - Опора не определена в скобках усов

0 голосов
/ 14 сентября 2018

Впервые в VueJS, поэтому любые предложения приветствуются.

Я пытаюсь использовать Vue для создания навигационной системы Bootstrap 4. Следующее работает отлично: 

var Tabs = new Vue({
    el: '#tabs',
    components: {
        'tab-view': TabView,
    },
    data: {     
        tabs: settings.tabs
    },
});

<div id='tabs'>
    <ul class='nav nav-tabs'>
        <li class='nav-item' v-for="(tab, index) in tabs" :tab='tab'>
            <a :id='tab' :index='index' :class='{ active: (tab == "app"), "nav-link": true}'>{{tab}}</a>
        </li>
    </ul>
</div>

Однако, когда я пытаюсь разделить его на шаблон с помощью тегов скрипта, он не работает - я получаю ReferenceError: вкладка не определена: 

var TabView = {
    template: '#tab-template',
    props: ['tab', 'index'],
};

<div id='tabs'>
    <ul class='nav nav-tabs'>
        <template v-for="(tab, index) in tabs">
            <tab-view :tab='tab' :index='index'></tab-view>
        </template>
        <script type='text/x-template' id='tab-template'>
            <li class='nav-item'>
                <a :id='tab' :index='index' :class='{ active: (tab == "app"), "nav-link": true}'>{{tab}}</a>
            </li>
        </script>
    </ul>
</div>

ОДНАКО, если я удалю {{tab}}, это работает. Что я делаю не так?

1 Ответ

0 голосов
/ 15 сентября 2018

На самом деле вы должны иметь tab-template вне vue app div tag, так как это часть определения компонента TabView, как это. 

<script type='text/x-template' id='tab-template'>
    <li class='nav-item'>
       <a :id='tab' :index='index' :class='{ active: (tab == "app"), "nav-link": true}' >{{tab}}</a>
    </li>
</script>

<div id='tabs'>
    <ul class='nav nav-tabs'>
        <div  v-for="(tab, index) in tabs" :key="index">
            <tab-view :tab='tab' :index='index' ></tab-view>
        </div>
    </ul>
</div>

Это что-то вроде того, как вы определили отдельнокомпонент var TabView в сценарии из основного vue var vm, затем использовал его как 'tab-view' в vue vm

var TabView = {
    template: '#tab-template',
    props: ['tab', 'index']

};


var vm= new Vue({
   el: '#tabs',
   components: {
      'tab-view': TabView,
   },
   data() {
      return{
         tabs:["Home","app","about"]
      }
   },
});
...