踩iviewui中Tabs 标签页数据绑定坑

今天小颖要实现点击Tabs 标签页中每个标签，并动态获取当前点击的标签值。

一句话说不清楚，那就看动态图吧

小颖一开始看官网写的代码是：

<template>
    <Tabs :value="whereMap.type" @on-click="clickTabs">
      <TabPane label="标签一" name="-1">标签一的内容</br>当前whereMap.type值：{{whereMap.type}}</TabPane>
        <TabPane label="标签二" name="1">标签二的内容</br>当前whereMap.type值：{{whereMap.type}}</TabPane>
        <TabPane label="标签三" name="2">标签三的内容</br>当前whereMap.type值：{{whereMap.type}}</TabPane>
    </Tabs>
</template>
<script>
    export default {
        data(){
          return{
            whereMap: {
              type: '-1'
            }
          }
        },
      methods:{
        clickTabs(){
          alert(this.whereMap.type);
        }
      }
    }
</script>

结果发现，whereMap.type的值一直都是“-1”，后来仔细看了api才知道，即使将   value    写成     :value 也是不起作用的，要实现双向绑定时需用   v-model    

所以只需将   :value="whereMap.type"  改为：v-model="whereMap.type"  即可