VueJS <script> 模板 - 小胡子括号中未定义道具答案

【问题标题】：VueJS <script> Template - Prop is not defined in mustache bracketsVueJS <script> 模板 - 小胡子括号中未定义道具
【发布时间】：2019-02-19 15:30:48
【问题描述】：

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

但是，如果我删除 {{tab}}，它会起作用。我做错了什么？

【问题讨论】：

传递 props 值的位置，即选项卡、索引
代码你提供你的整个代码以便测试它
我建议你看看 bootstrap-vue。 bootstrap-vue.js.org

标签： vue.js vuejs2 vue-component v-for

【解决方案1】：

您实际上应该在vue app div tag 之外拥有tab-template，因为它是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>

类似于您在脚本中从主 vue var vm 中单独定义组件 var TabView，然后在 vue vm 中将其用作 'tab-view' 的方式

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

};


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

【讨论】：

谢谢！有道理。