Vuetify table - 添加超链接到列

Question

在我的 vue 组件中，我正在使用 vuetify table。它工作正常，但我需要点击“类别名称”列中的项目重定向到显示点击项目详细信息的 vue 视图（我需要转发项目 ID 以查看显示项目详细信息的视图）。我不知道该怎么做？

在方法'editItem'中我还需要重定向到其他页面，使用转发的id，我也不知道该怎么做？

我尝试将“类别名称”项目设为超链接，但它不起作用而且没有 ID：

<template v-slot:item.categoryName="{ item }">
    <a :href="this.$router.push({name: 'EditCategory'})">{{item.categoryName}}</a>
</template>

这是我的 vue 组件的代码 'CategoryTable':

<template>
  <v-data-table
    :headers="headers"
    :items="categories"
    sort-by="categoryName"
    class="elevation-1"
    :footer-props="{
    'items-per-page-options': [1, 2, 3, 4, 5]
  }"
  :items-per-page="2"
  >
    <template v-slot:top>
      <v-toolbar
        flat
      >
        <v-toolbar-title>Categories Table</v-toolbar-title>
        <v-divider
          class="mx-4"
          inset
          vertical
        ></v-divider>
        <v-spacer></v-spacer>
        <button @click="$router.push({name: 'AddCategory'})">Add category</button>
          </v-toolbar>
    </template>
    <template v-slot:item.actions="{ item }">
      <v-icon
        small
        class="mr-2"
        @click="editItem(item)"
      >
        mdi-pencil
      </v-icon>
      <v-icon
        small
        @click="deleteItem(item)"
      >
        mdi-delete
      </v-icon>
    </template>
  </v-data-table>
</template>

<script>
  export default {
        name: "CategoriesTable",

    data: () => ({
      
      headers: [
        {
          text: 'Category name',
          align: 'start',
          value: 'categoryName',
        },
        { text: 'Description', value: 'description' },
        { text: 'Actions', value: 'actions', sortable: false },
      ],
      categories: [],
      editedIndex: -1,
      defaultItem: {
        id: 0,
        categoryName: '',
        description: '',
      },

    }),

    created () {
      this.initialize()
    },

    methods: {
      initialize () {
      this.$axios.get('/api/categories').then((response) => {
        console.log(response.data)
      this.categories = response.data;
    });
     },

      editItem (item) {
        this.$router.push({name: 'CategoryEdit'});
        item.id

      },

      deleteItem (item) {
      this.$axios.delete('/api/categories/' + item.id).then((response) => {
        console.log(response)
    });
      },
    },
  }
</script>

Answer 1

如果您希望用户在点击特定类别名称后被重定向，您将传递相应的路由或 ID，就像我在下面所做的那样：

<v-data-table
              :headers="headers"
              :items="categories"
              sort-by="categoryName"
              class="elevation-1"
              :footer-props="{
                'items-per-page-options': [1, 2, 3, 4, 5],
              }"
              :items-per-page="2"
            >
              <template v-slot:item.categoryName="{ item }">
                <a
                 @click="$router.push(`/details/${item.itemID}`)"
                >
                  {{item.categoryName}}
                </a>

              </template>
            </v-data-table>

商品id是点击分类后传递的

Vuetify table - 添加超链接到列

Vuetify table - add hyperlink to column

vue.js

vue-router

vuetify.js