vuejs - using ivew tab with badge count

Question

I'm refering to the docs http://v3.iviewui.com/components/tabs-en for allocating badge count for the tabs.

My HTML:

 <Tabs>
 <TabPane :label="label">
    Some Components here
 </TabPane>
 <Tabs>

And my JS:

<script>
import { Tabs, TabPane, Badge } from "iview";

export default {

  components: {
    Tabs,
    TabPane,
    Badge
  },
  data() {
    return {

      label: (h) => {
        return h("div", [
          h("span", "Result"),
          h("Badge", {
            props: {
              count: 5
            }
          })
        ]);
      }
    };
  }

But I keep receiving errors

[Vue warn]: Unknown custom element: Badge - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I'm following exactly the same code from the sample but I'm not sure why the error is happening.

Answer 1

To answer your first question, the problem is that you have quoted "Badge" in your render function which means Vue will be looking for a globally registered component of that name. What you want is to use the locally registered component

h(Badge, {
  props: {
    count: 5
  }
})

---

As for your question from the comments...

am I possible to modify the badge count value from a method within the component ?

Yes, I think so. All you should need to do is register a data property that you can modify via methods or whatever. For example

data () {
  return {
    count: 5, // initial value,
    label: h => h('div', [
      h('span', 'Result'),
      h(Badge, {
        props: {
          count: this.count
        }
      })
    ])
  }
},
methods: {
  incrementCount () {
    this.count++
  }
}

_{Note: I tested this using some very simple components so I'm not 100% sure it will work with the iview ones.}