Как передать переменную из цикла v-for (vuejs + vue-router)?

Для передачи переменной из цикла v-for в компоненте, использующем Vue.js и Vue Router, вы можете воспользоваться свойством props.

Прежде всего, убедитесь, что вы импортировали Vue и Vue Router в своем компоненте. Затем укажите, что вы хотите передать переменную в качестве свойства компонента.

Вот пример кода:

1. Ваш компонент, содержащий цикл v-for:

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <router-link :to="{ name: 'ItemDetail', params: { itemId: item.id }}" :item="item">
          {{ item.name }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

2. Ваш компонент, принимающий переданную переменную в качестве свойства:

<template>
  <div>
    <h1>{{ item.name }}</h1>
    <p>{{ item.description }}</p>
  </div>
</template>

<script>
export default {
  props: ['item'], // указываем, что мы ожидаем свойство item
};
</script>

3. В роутере настройте путь к вашему компоненту:

import Vue from 'vue';
import VueRouter from 'vue-router';
import ItemDetail from './components/ItemDetail.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: '/items/:itemId',
      name: 'ItemDetail',
      component: ItemDetail,
      props: true // передаем свойства, включая item, из параметров пути
    }
  ]
});

export default router;

Когда вы теперь щелкаете на элемент цикла v-for, переменная item передается в компонент ItemDetail через параметр itemId и доступна в качестве свойства item. Вы можете обращаться к нему как this.item внутри компонента ItemDetail.

Надеюсь, это поможет! Если у вас возникнут вопросы, не стесняйтесь и задавайте их.