Маршрутизатор работает, если я связываюсь с кнопкой, но значок не отображается. Определите маршрут в методах рендеринга иконки, а ссылка не работает

Question

Я в Vue. js, когда Veutify пытается создать кнопку в виде ссылки со значком. Кнопка отправит вас на страницу сведений о выбранном элементе.

Маршрут определен как:

  {
    path: '/:id',
    name: 'project',
    component: Project,
    props: true
  },

Привязать ссылку к кнопке, ссылка работает, но значок не отображается .

<v-btn
  :to ="{
      name: 'project',
      params: { id: item }
 }"
fab
dark
color="blue darken-3">

Если я определю ссылку в программных методах, как показано ниже, значок останется, а элемент будет «не определен».

<v-btn
@click="getProjectDetails"
fab
dark
color="blue darken-3">



  methods: {
    ...mapActions(["fetchItems"]),
    getProjectDetails() {
      this.$router.push({name: 'project', params: {id: item } })
    },

изменить {id: this.item} и ошибка

[vue -router] отсутствует параметр для именованного маршрута "project": ожидаемый "id" быть определенным

Чего мне не хватает? Спасибо за любую помощь.

Редактировать

Элементы поступают от итератора данных Veutify. https://vuetifyjs.com/en/components/data-iterators/ Элементы устанавливаются в projNames из вычисляемого свойства ниже. projNames отображает массив повторяющихся имен, чтобы получить список уникальных имен. Все, что мне нужно, это добавить имя к URL при нажатии кнопки. Вот почему ссылка, определенная в кнопке, работает - вне итератора. Элементы не определены ... Я думаю,

  computed: {
    ...mapGetters(["allItems"]),
    projNames: function() {
      return [...new Set(this.allItems.map(x => x.proj.Name))];
    },
  },

Редактировать

Элементы встроены опора итератора данных Vuetify. Для элементов установлено значение = для вашего пользовательского типа данных, в этом случае вычисляемое свойство с именем projName.

<v-data-iterator 
  :items="projNames">
      <template v-slot:default="props">
          <v-col v-for="(item, index) in props.items" :key="index">
            <v-card class="mx-auto" max-width="400">
              <v-card-title>{{ item }}</v-card-title>
              <v-card-actions>
                <v-btn
                :to ="{
                  name: 'project',
                  params: { id: item }
                }"
                fab
                dark
                  color="blue darken-3">
                  <v-icon>mdi-chevron-right</v-icon>
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
      </template>
    </v-data-iterator>

Answer 1

Передайте этот item в качестве параметра методу getProjectDetails, например:

<v-btn
@click="getProjectDetails(item)"
fab

и

  getProjectDetails(item) {
      this.$router.push({name: 'project', params: {id: item } })
    },