VueJS <script> Template - Prop is not defined in mustache brackets

Question

New to VueJS, so any suggestions are welcome.

I'm trying to use Vue to create Bootstrap 4 navs. The following works fine:

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>

However, when I try to separate it out into a template using script tags, it doesn't work--I receive a ReferenceError: tab is not defined:

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>

HOWEVER, if I remove {{tab}}, it works. What am I doing wrong?

Answer 1

You should actually have the tab-template outside of the vue app div tag, since its a part of the TabView component definition like this.

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

Its something like the how you have separately defined the component var TabView in the script from the main vue var vm, then used that as 'tab-view' in the 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"]
      }
   },
});