如果我绑定到按钮,但图标没有被渲染,路由器-链接就会工作。在方法中定义路由,图标渲染,链接不工作。

问题描述 投票:0回答:1

我在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>
vue.js vuetify.js vue-router
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.