Repository: element-plus/element-plus
File: packages/components/segmented/src/segmented.vue (Vue)

Code before:
<template>
  <div
    v-if="options.length"
    :id="inputId"
    ref="segmentedRef"
    :class="segmentedCls"
    role="radiogroup"
    :aria-label="!isLabeledByFormItem ? ariaLabel || 'segmented' : undefined"
    :aria-labelledby="isLabeledByFormItem ? formItem!.labelId : undefined"
  >
    <div :class="[ns.e('group'), ns.m(props.direction)]">
      <div :style="selectedStyle" :class="selectedCls" />
      <label
        v-for="(item, index) in options"
        :key="index"
        :class="getItemCls(item)"
      >
        <input
          :class="ns.e('item-input')"
          type="radio"
          :name="name"
          :disabled="getDisabled(item)"
          :checked="getSelected(item)"
          @change="handleChange(item, $event)"
        />
        <div :class="ns.e('item-label')">
          <slot :item="item">{{ getLabel(item) }}</slot>
        </div>
      </label>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive, ref, watch } from 'vue'
import { useActiveElement, useResizeObserver } from '@vueuse/core'
import { useId, useNamespace } from '@element-plus/hooks'
import {
  useFormDisabled,
  useFormItem,
  useFormItemInputId,
  useFormSize,
} from '@element-plus/components/form'
import { debugWarn, isObject } from '@element-plus/utils'
import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
import { segmentedEmits, segmentedProps } from './segmented'
import type { Option } from './types'

defineOptions({

Review comment (suggestion):
```suggestion
          @change="handleChange($event, item)"
```

Code after:
<template>
  <div
    v-if="options.length"
    :id="inputId"
    ref="segmentedRef"
    :class="segmentedCls"
    role="radiogroup"
    :aria-label="!isLabeledByFormItem ? ariaLabel || 'segmented' : undefined"
    :aria-labelledby="isLabeledByFormItem ? formItem!.labelId : undefined"
  >
    <div :class="[ns.e('group'), ns.m(props.direction)]">
      <div :style="selectedStyle" :class="selectedCls" />
      <label
        v-for="(item, index) in options"
        :key="index"
        :class="getItemCls(item)"
      >
        <input
          :class="ns.e('item-input')"
          type="radio"
          :name="name"
          :disabled="getDisabled(item)"
          :checked="getSelected(item)"
          @change="handleChange($event, item)"
        />
        <div :class="ns.e('item-label')">
          <slot :item="intoAny(item)">{{ getLabel(item) }}</slot>
        </div>
      </label>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive, ref, watch } from 'vue'
import { useActiveElement, useResizeObserver } from '@vueuse/core'
import { useId, useNamespace } from '@element-plus/hooks'
import {
  useFormDisabled,
  useFormItem,
  useFormItemInputId,
  useFormSize,
} from '@element-plus/components/form'
import { debugWarn, isObject } from '@element-plus/utils'
import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
import { defaultProps, segmentedEmits, segmentedProps } from './segmented'

import type { Option } from './types'