vue.js - 在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',
        },
    }, ]

任何想法请帮助我..谢谢。

标签： vue.js

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)
  }
}