Vue.JS, можно ли использовать значение зарезервированного атрибута key внутри компонента, созданного с помощью директивы v-for?
Я разрабатываю приложение на Vue.js. Мне необходимо сделать меню с помощью директивы v-for. В компоненте my_menu я определяю компонент my_step:
<my_step
v-for="(step, index) in steps"
:key="index"
>
# тут находится код, который потом будет добавлен в slot
</my_step>
В компоненте my_step я хочу получить значение key (то есть номер шага). Пытаюсь сделать так:
<template>
<div>
<slot />
</div>
</template>
<script lang="coffee">
export default {
props: {
key: {
type: Number
}
}
computed: {
foo: () ->
# тут хочу использовать значение key
}
}
</script>
Но vue выдает ошибку:
"key" is a reserved attribute and cannot be used as component prop.
Конечно, я могу создать ещё один атрибут, в котором буду передавать компоненту my_step номер шага, вот так:
<my_step
v-for="(step, index) in steps"
:key="index"
:number_of_step="index"
>
# тут находится код, который потом будет добавлен в slot
</my_step>
Но использование двух свойств с одинаковым значением выглядит нерациональным. Есть ли способ получить значение зарезервированного атрибута key внутри компонента my_step?