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

Posted 2023-02-23

【中文标题】VueJS <script> 模板 - 小胡子括号中未定义道具

【英文标题】：VueJS <script> Template - Prop is not defined in mustache brackets

【发布时间】：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

【参考方案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"]
      
   ,
);

【讨论】：

谢谢！有道理。