踩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"  便可