Vue composition typescript access props value in another props validation

Question

i would want to access the props value from another props validator.

Here is my code:

<script lang="ts" setup>
    import { PropType } from 'vue';
    import { iStep } from '@/interfaces/iStep.ts';
    import Step from './Step.vue'

    interface Props {
        steps: string[]|iStep[] ;
        currentStep: number;
    }

    
    const props = defineProps({
        steps: {
            type: [Array as PropType<iStep[]> , Array as PropType<string[]>],
            required: true
        },
        currentStep: {
            type: Number,
            validator: (value: number) => {
                return value >= 1 && value < this?.steps.length;
            }
        }
    });
    
</script>

In the validator this is always undefined and if i try to call it via props const i have an error defineProps() in <script setup> cannot reference locally declared variables because it will be hoisted outside of the setup() function.

I would want to restrict currentStep to be in range 0, props.steps.length.

Any idea how to achieve that ?

And did my steps props declaration type good ?

EDIT:

Access props value in another props' validator doesn't answer my question because in that case it use the option api instead of the api composition from vue (https://vuejs.org/guide/extras/composition-api-faq.html).

Does this answer your question? Access props value in another props' validator — ArrayConstructor
– ArrayConstructor, Commented Oct 31, 2023 at 13:35
Option API or not, the answer is the same …. You can't access another prop in a validator from another prop. A way to solve your problem is to put your 2 props in the same object. That way, you can access it in your validator. — ArrayConstructor
– ArrayConstructor, Commented Oct 31, 2023 at 16:11

Kristofer · Accepted Answer · 2023-11-10 11:34:22Z

0

I would suggest putting the validator in a separate function and not mix it with values from a parent component:

const validator = (value: number) => value >= 1 && value < props.steps.length;

answered Nov 10, 2023 at 11:34

Kristofer

8739 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue composition typescript access props value in another props validation

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related