mint-ui的tabbar怎么默认被选中呢

Question

用了mint官网的tabbar和tabContainer。但是默认不显示第一个选项卡。必须点一下才显示对应的选项卡内容.我给第一个选项卡加了一个is-selected的class名不好使。mint应该有自己的默认的方法吧？我在文档里没看到有写。

<template>
  <div>
      <mt-tab-container v-model="selected">
            <mt-tab-container-item id="index">
                <mt-cell title="tab-container 1"></mt-cell>
            </mt-tab-container-item>
            <mt-tab-container-item id="news">
                <mt-cell title="tab-container 2"></mt-cell>
            </mt-tab-container-item>
            <mt-tab-container-item id="usercenter">
                <mt-cell title="tab-container 3"></mt-cell>
            </mt-tab-container-item>
        </mt-tab-container>
    <mt-tabbar v-model="selected">
        <mt-tab-item id="index" @click="reid()">
            <img slot="icon" src="">
            外卖
        </mt-tab-item>
        <mt-tab-item id="news">
            <img slot="icon" src="">
            订单
        </mt-tab-item>
        <mt-tab-item id="usercenter">
            <img slot="icon" src="">
            我的
        </mt-tab-item>
    </mt-tabbar>

  </div>
</template>

<script>


export default {
    data(){
        return{
            selected:'',
            isActive:true,
            active:'is-selected'
        }
    },
    mounted(){
        // let icondiv = document.getElementsByClassName("mint-tab-item-icon")
        // console.log(icondiv)
        // icondiv[0].classList.add("iconfont icon-shouye")
        // icondiv[1].classList.add("iconfont icon-xinwen")
        // icondiv[2].classList.add("iconfont icon-xinwen")

    },
    methods:{
        reid(){
            console.log(this.value)
        }
    }
}
</script>

<style scoped lang="stylus">

</style>

默认未被选中显示空白

点击底部导航后

怎么才能设置默认被选中呢

Answer 1

每一个mt-tab-item有1个id，mt-tabbar的v-model绑定值等于id时即选中。设置你的selected默认值为第一个mt-tab-item的id

Answer 2

设置 selected:"1",就行了，此处"1"是我这里的，想要哪个显示你就把下面 mt-tab-item id="1" 设置一下就行了