ant design vue使用a-tabs动态设置Active
作者:
请叫我Mr彼特 | 来源:发表于
2020-10-25 18:43 被阅读0次一次在vue项目中使用ant design的a-tabs,动态绑定了activekey却不生效,代码如下:
<template>
<a-tabs :active-key="activeKey" @change="tabChange">
<a-tab-pane tab="今日业绩" key="0">
<component :is="todayComponent" pageType="today" />
</a-tab-pane>
<a-tab-pane tab="历史日报" key="1">
<component :is="hishoryComponent" pageType="hishory" />
</a-tab-pane>
</a-tabs>
</template>
- 看了半天代码都没有错误却不生效,why?
- 岂有此理,然后去官方文档看到说的是这个必须是string,分析应该是activeKey被我设置成number类型。导致动态绑定值不显示生效,把它设置为string类型即可。
代码如下:
<script>
export default {
data () {
return {
//activeKey: 0, // 一开始设置的是number类型,导致的绑定不生效
activeKey: '0', // 正确的类型应该用 string
todayComponent,
hishoryComponent
}
},
}
</script>
随笔记下这次的问题,其实是因为没仔细看文档说明造成,代码并没有问题,只不过是传递的数据类型导致的问题。
今后使用一些插件时如果代码没问题,一定要去看下官方文档的使用说明,问题应该会迎刃而解。
本文标题:ant design vue使用a-tabs动态设置Active
本文链接:https://www.haomeiwen.com/subject/alunpktx.html
网友评论