在vuejs中單擊列表中的名稱時切換頁面？

Question

我正在 vuejs 中制作列表頁面。 現在我遇到了一些問題，如下所示：

<template>
    <vue-good-table
            :columns="columns"
            :rows="row"
            :search-options="{
              enabled: true,
              externalQuery: searchTerm,
            }"
    </vue-good-table>
</template>
<script>
    data() {
      return: {
         row: [];
         columns: [
        {
          label: "Name",
          field: "name",
        },
        {
          label: "Price",
          field: "price",
        },
        {
          label: "Quantity",
          field: "quantity",
        },
      ],
      }
    },
    created() {
       axios
          .get("/project/api/list")
          .then((res) => {
              this.rows = res.data;
          })
    }
</script>

我希望當我單擊名稱 samsung 或 iphone 時，它​​會轉到該產品詳細信息頁面。

路線詳情產品：

export default [{
        path: '/detail/product/:id',
        name: 'detail-product',
        component: () =>
            import ('@/views/product/list.vue'),
        meta: {
            resource: 'PRODUCT',
        },
    }, ]

任何想法請幫助我..謝謝。

Answer 1

嘗試將事件@on-row-click添加到您的表中：

<vue-good-table
  :columns="columns"
  :rows="row"
  :search-options="{
    enabled: true,
    externalQuery: searchTerm,
  }"
  @on-row-click="onRowClick"
</vue-good-table>

然后在方法路由到詳細信息頁面：

methods: {
  onRowClick(params) {
    this.$router.push('/detail/product/' + params.row.id)
  }
}