使用Mint UI 的 Navbar 遇到的一个不显示选项内容的小坑

在编写 Vue 项目时用到了 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>

好的！于是我在我将示例中的代码拷贝到我的项目中使用：

<div class="arrow">
	<span class="iconfont">&#xe637;</span>
	<!-- 选项 -->
	<navbar v-model="selected">
		<tab-item id="1">选项一</tab-item>
		<tab-item id="2">选项二</tab-item>
		<tab-item id="3">选项三</tab-item>
	</navbar>
	
	<!-- 与选项对应的子项 -->
	<tab-container v-model="selected">
		<tab-container-item id="1">
			<cell v-for="n in 10" :title="'内容 ' + n" />
		</tab-container-item>
		<tab-container-item id="2">
			<cell v-for="n in 4" :title="'测试 ' + n" />
		</tab-container-item>
		<tab-container-item id="3">
			<cell v-for="n in 6" :title="'选项 ' + n" />
		</tab-container-item>
	</tab-container>
</div>

然后我启动了服务器进行也页面的访问测试，得到了如下的结果：

是的，你没看错，渲染结果中只有“项”显示出来了，与“项”相对应的子项却没有显示出来，并且此时如果你用鼠标点击一下“选项一/选项2/选项三”中的任意一个，会发现子项显示出来了！

what the fuck…

不用怀疑！在官方文档中的使用步骤里明确说明需要导入的，需要注册的内容都已进行导入和注册，开始了度娘。。。
注意代码中有标签中的 id=1 / id=2 的这些 id 属性的编写，这种写法会导致一个问题，页面加载后，不会将你想设定的默认选项页面（比如选项一）选中并显示出来，如果想要页面加载后就显示默认选中的“选项”及其子项，那就这样写：

<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>

将标签中 id 属性前面也加上“:”，于是我修改了我的代码：

<div class="arrow">
  <span class="iconfont">&#xe637;</span>
  <!-- 选项 -->
  <navbar v-model="selected">
    <tab-item :id="1">选项一</tab-item>
    <tab-item :id="2">选项二</tab-item>
    <tab-item :id="3">选项三</tab-item>
  </navbar>

  <!-- 与选项对应的子项 -->
  <tab-container v-model="selected">
    <tab-container-item :id="1">
      <cell v-for="n in 10" :title="'内容 ' + n" />
    </tab-container-item>
    <tab-container-item :id="2">
      <cell v-for="n in 4" :title="'测试 ' + n" />
    </tab-container-item>
    <tab-container-item :id="3">
      <cell v-for="n in 6" :title="'选项 ' + n" />
    </tab-container-item>
  </tab-container>
</div>

神奇的一幕出现了：

此时只要点击跳到这个页面中，就会将组件的“项”及其“子项”都渲染出来了，不需要点击一下“项”才能显示出来“子项”了，且进入页面的时候会默认选中“选项一”。这里默认选中“选项一”还需要注意一个问题，不管是“navbar”标签还是“tab-container”标签中都使用 v-model 绑定了 selected ，这个 selected 就是设置“默认选中谁”的，selected 与 tab-item 中的 id 的值和 tab-container-item 中的 id 的值相关联，这个大家一定要自己在 data 中声明并赋值，赋值为 1 则默认选中“选项一”，为 2 则默认选中“选项二”。

希望看到的朋友对你有帮助，共同进步。