今天小颖要实现点击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" 即可