我在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.comencomponentsdata-iterators。 项目被设置为projNames来自于下面的计算属性。projNames映射一个重复的名称数组,得到一个唯一的名称列表。我所需要的是当按钮被点击时,得到附加到url的名称。这就是为什么在按钮中定义的链接可以工作--在迭代器之外的Items是未定义的......我想。
computed: {
...mapGetters(["allItems"]),
projNames: function() {
return [...new Set(this.allItems.map(x => x.proj.Name))];
},
},
编辑
Items是Vuetify数据迭代器的一个内置道具。Items被设置为=您的自定义数据类型,在这种情况下,一个叫做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>