vue 动态组件tab切换后，如何实现导航的高亮问题？

Question

如图，用vue的动态组件实现的tab切换，现在想让导航显示高亮! 点击登录时高亮展示，注册高亮失效，反之……

代码：

    <div class="title">
        <span @click="toggleTab('log')">登录</span>
        <span>•</span>
        <span @click="toggleTab('reg')">注册</span>
    </div>
    <div>
        <keep-alive>
            <component :is="flag"></component>    
        </keep-alive>
    </div>

      export default {
          data(){
              return{
                  flag:'reg',
              }
          },
          components:{
              reg,
              log
          },
        methods: {
          toggleTab: function(index) {
           this.flag = index;     
          },
        }
      }          

本来想用 循环方式写,但是发现实现高亮之后，动态组件展示不出来了。有什么好方法吗，求解？

<span v-for='(item,index) in menu' v-bind:class="{'on':flag==index}" v-on:click='toggleTab(index)'>{{item.name}}</span>        

Answer 1

vuex管理高亮的index啊