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?


Ответы (0 шт):