mint-ui 的navbar踩坑记

首先，mt-tab-item不支持v-for

<mt-tab-item v-for="(item,key) in list" :key="key" id="item.title">{{item.title}}</mt-tab-item>

能正常显示导航，但点击任何一个菜单，都会全部选中，所以只能像例子一样，一个个写。

其次，如果需要同时选择图片，应该这么写

<template>
  <div id="tab-bar">
    <mt-tabbar v-model="selected" v-show="isShow" fixed>
      <mt-tab-item id="main">
          <img :src="selected === img1.title? img1.url1: img1.url0" slot="icon">首页
      </mt-tab-item>
      <mt-tab-item id="focus">
        <img :src="selected === img3.title? img3.url1: img3.url0" slot="icon">我的关注
      </mt-tab-item>
      <mt-tab-item id="todolist">
        <img :src="selected === img7.title? img7.url1: img7.url0" slot="icon">待办事项
      </mt-tab-item>
      <mt-tab-item id="my">
        <img :src="selected === img9.title? img9.url1: img9.url0" slot="icon">我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<style>
</style>
<script>
  import * as types from '../store/mutation-types'
  export default {
    data(){
      return {
        selected: sessionStorage.getItem('selected') || 'main', 
        img1: {title: 'main', url0: require("../assets/tool/home.png"), url1: require("../assets/tool/home_selected.png")},
        img3: {title: 'focus', url0: require("../assets/tool/focus.png"), url1: require('../assets/tool/focus_selected.png')},
        img7: {title: 'todolist', url0: require("../assets/todolist/todolist.png"), url1: require("../assets/todolist/todolist_selected.png")},
        img9: {title: 'my', url0: require("../assets/tool/user.png"), url1: require("../assets/tool/user_selected.png")}
      }
    },
    computed: {
      isShow: function () {
        return this.$store.state.footerVisible;
      }
    },
    watch: {
        'selected': {
          handler() {
            switch (this.selected) {
                case 'main': 
                    this.$router.push('/main')
                    this.$store.commit(types.SELECT_FOOTER_TAB, 'main')
                    break
                case 'focus': 
                    this.$router.push('/focus')
                    this.$store.commit(types.SELECT_FOOTER_TAB, 'focus')
                    break
                case 'todolist': 
                    this.$router.push('/todolist')
                    this.$store.commit(types.SELECT_FOOTER_TAB, 'todolist')
                    break
                case 'my': 
                    this.$router.push('/my')
                    this.$store.commit(types.SELECT_FOOTER_TAB, 'my')
                    break
            }
        }
      }
    }
  }
</script>