oruga-ui / oruga

🐛 Oruga is a lightweight library of UI components without any CSS framework dependency
https://oruga-ui.com
MIT License
1.12k stars 171 forks source link

OSteps: v-model value is not reflected when the type is Number #740

Closed mk-startialab closed 7 months ago

mk-startialab commented 8 months ago

Overview of the problem

Oruga version: [0.8.2] Vuejs version: [3.3.13] OS/Browser: Chrome 120.0.6099.217 on Windows 10

Description

v-model value of OSteps is ignored when the type is Number. Type definition of modelValue for OSteps is [String, Number] at line 36 in Steps.vue.

Source:

<script setup>
import { ref } from 'vue'
const activeStep = ref(2)
const someArray = ref(['Orange', 'Apple', 'Strawberry', 'Banana'])
</script>

<template>
  <o-steps v-model="activeStep">
    <o-step-item v-for="(step, index) in someArray", :value='step', :key='step', :label='step'></o-step-item>
  </o-steps>
</template>

Steps to reproduce

Reproduction rate is 100%.

Expected behavior

The 3rd item (Strawberry) of OStepItem becomes active.

Actual behavior

The 1st item (Orange) of OStepItem became active.

mlmoravek commented 8 months ago

@mk-startialab I think you have a misunderstanding. The v-model of o-steps represents the value property of the o-item. Your activeStepshould be Strawberry, not 2. You can't select the o-item by index, except you set the index as value.

mk-startialab commented 8 months ago

@mlmoravek Oh, sorry, I understand. (In Buefy's BSteps, the current position could be specified by index if it was a numeric type.)

Hmm, if so, it might be more helpful to put a note in the documentation, since the current documentation without any particular note could be misleading, as in my case.