1. 程式人生 > >使用mint-ui Navbar遇到的一個小坑

使用mint-ui Navbar遇到的一個小坑

根據官方文件例子的描述navbar要這樣使用:

<mt-navbar v-model="selected">
  <mt-tab-item id="1">選項一</mt-tab-item>
  <mt-tab-item id="2">選項二</mt-tab-item>
  <mt-tab-item id="3">選項三</mt-tab-item>
</mt-navbar>

<!-- tab-container -->
<mt-tab-container v-model="selected"
>
<mt-tab-container-item id="1"> <mt-cell v-for="n in 10" :title="'內容 ' + n" /> </mt-tab-container-item> <mt-tab-container-item id="2"> <mt-cell v-for="n in 4" :title="'測試 ' + n" /> </mt-tab-container-item> <mt-tab-container-item id="3"> <mt-cell
v-for="n in 6" :title="'選項 ' + n" />
</mt-tab-container-item> </mt-tab-container>
但是注意程式碼中有下劃線的地方,這種寫法會導致一個問題,頁面載入後,不會將你設定的頁面選中顯示出來,如果想頁面載入後就顯示其中的某個子頁,那就這樣寫
<mt-navbar v-model="selected">
  <mt-tab-item :id="1">選項一</mt-tab-item>
  <mt-tab-item :id="2">選項二</mt-tab-item
>
<mt-tab-item :id="3">選項三</mt-tab-item> </mt-navbar> <!-- tab-container --> <mt-tab-container v-model="selected"> <mt-tab-container-item :id="1"> <mt-cell v-for="n in 10" :title="'內容 ' + n" /> </mt-tab-container-item> <mt-tab-container-item :id="2"> <mt-cell v-for="n in 4" :title="'測試 ' + n" /> </mt-tab-container-item> <mt-tab-container-item :id="3"> <mt-cell v-for="n in 6" :title="'選項 ' + n" /> </mt-tab-container-item> </mt-tab-container>