ant design vue使用a-tabs动态设置Active

2020-10-25  本文已影响0人  请叫我Mr彼特
一次在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>
<script>
export default {
  data () {
    return {
      //activeKey: 0,  // 一开始设置的是number类型,导致的绑定不生效
      activeKey: '0',  // 正确的类型应该用 string 
      todayComponent,
      hishoryComponent
    }
  },
}
</script>
随笔记下这次的问题,其实是因为没仔细看文档说明造成,代码并没有问题,只不过是传递的数据类型导致的问题。
今后使用一些插件时如果代码没问题,一定要去看下官方文档的使用说明,问题应该会迎刃而解。
上一篇 下一篇

猜你喜欢

热点阅读