yuche / vue-strap

Bootstrap components built with Vue.js
http://yuche.github.io/vue-strap/
MIT License
4.71k stars 932 forks source link

tabs components doesn't work #479

Open miladmeidanshahi opened 7 years ago

miladmeidanshahi commented 7 years ago

Hi, i import the tab component but it seems that doesn't work why ?!


import VueStrap from 'vue-strap'

components: {
    tabs: VueStrap.tabset,
    tabGroup: VueStrap.tabGroup,
    tab: VueStrap.tab
},

<tabs>
                <tab header="one">
                ...
                </tab>
                <tab header="two" disabled>
                ...
                </tab>
                <tab-group header="group1">
                    <tab header="three">
                    ...
                    </tab>
                    <tab header="four" disabled>
                    ...
                    </tab>
                </tab-group>
                <tab-group header="group2">
                    <tab header="five">
                    ...
                    </tab>
                </tab-group>
            </tabs>

and i got this error

[Vue warn]: Error compiling template:

<div _v-e8aecb90="">
    <!-- Nav tabs -->
    <ul class="nav nav-{{navStyle}}" role="tablist" _v-e8aecb90="">
      <template v-for="t in headers" _v-e8aecb90="">
        <li v-if="!t._tabgroup" :class="{active:t.active, disabled:t.disabled}" @click.prevent="select(t)" _v-e8aecb90="">
          <a href="#" _v-e8aecb90=""><slot name="header" _v-e8aecb90="">{{{t.header}}}</slot></a>
        </li>
        <dropdown v-else="" :text="t.header" :class="{active:t.active}" :disabled="t.disabled" _v-e8aecb90="">
          <li v-for="tab in t.tabs" :class="{disabled:tab.disabled}" _v-e8aecb90=""><a href="#" @click.prevent="select(tab)" _v-e8aecb90="">{{tab.header}}</a></li>
        </dropdown>
      </template>
    </ul>
    <div class="tab-content" v-el:tab-content="" _v-e8aecb90="">
      <slot _v-e8aecb90=""></slot>
    </div>
  </div>

- class="nav nav-{{navStyle}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
- invalid expression: {{{t.header}}}

(found in <Tabs>)' of undefined
NateTheGreatt commented 7 years ago

Are you using Vue2? Here's a fork that updated this lib for Vue2 use: https://github.com/wffranco/vue-strap

afucher commented 7 years ago

Will have an official support to Vue2?