Cannot using tabs / Segmented control

[chandranoor]

Describe the bug Pasted the code from documentation, but doesn't work. Selected item wont change.

If you don't mind, please give an example for tab and segemented control with contents.

To Reproduce Steps to reproduce the behavior:

1. Go to https://lecoueyl.github.io/mijin.web/docs/atoms/segmentedControl
2. Copy the example code
3. Paste it on nuxt
4. Element shows up but doesn't work

Expected behavior Some components work like charm ( I tried toast and popover both are working properly)

[lecoueyl]

Hi @chandranoor

The code in the documentation is quite dummy and will not work if pasted directly since it needs a data to bind. You can view the code used in the documentation: https://github.com/lecoueyl/mijin.web/blob/main/src/pages/docs/atoms/segmentedControl.vue https://github.com/lecoueyl/mijin.web/blob/main/src/pages/docs/atoms/tabs.vue

Or you should be able to use the component like this:

<template>
  <div>
    <MjSegmentedControl>
      <MjSegmentedControlItem
        :selected="selectedItem === 'banana'"
        @select="selectedItem = 'banana'"
      >
        Banana
      </MjSegmentedControlItem>
      <MjSegmentedControlItem
        :selected="selectedItem === 'orange'"
        @select="selectedItem = 'orange'"
      >
        Orange
      </MjSegmentedControlItem>
      <MjSegmentedControlItem
        :selected="selectedItem === 'kiwi'"
        @select="selectedItem = 'kiwi'"
      >
        Kiwi
      </MjSegmentedControlItem>
    </MjSegmentedControl>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: "banana",
    };
  },
};
</script>

Hope it helps, and thank you for your interest!

[lecoueyl]

I'm going to close this issue since no response for 14 days. If you feel this issue should be reopened, create a new issue linking back to this one for added context. Thanks!

[chandranoor]

Oh I see, I will look into code used in the documentation for other components

Thanks for your reply, it's really helpful.