want to implement:
add a new nav and jump to the new nav interface

and select the first nav when entering the page for the first time

  <div id="app" class="container">
    <ul class="nav nav-tabs" role="tablist">
    /*list;countnavid*/
      <li :class= "(list.id===count)? "active" : """ v-for="(list, index) in shoppinglists" role="presentation">  
        <a :href=""-sharp"+list.id" :aria-controls="list.id" role="tab" data-toggle="tab">{{ list.title }}
          <span class="glyphicon glyphicon-remove delete" @click="deleteList(index)"></span>
        </a>
      </li>
      <li role="presentation"  @click="addList()" ><a href="-sharp" class="glyphicon glyphicon-plus add"></a></li>
    </ul>

    <div class="tab-content">
      <div :class= "index===count ? "active" : """ v-for="(list) in shoppinglists" class="tab-pane" role="tabpanel" :id="list.id">
        <shopping-list-component></shopping-list-component>
      </div>
    </div>
  </div>

the problem is: when you click on one of the tabs, pressing + will produce two active. Causes multiple lists to appear on the page