How can I implement a page switch in vuejs by clicking on a name in a table list?

I'm currently working on a list page in VueJS and facing some challenges. Here is the code snippet:

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

https://i.sstatic.net/9FojN.png

My goal is to make it so that when I click on the name of a product like "Samsung" or "iPhone", it will navigate to the detailed product page.

The route for the detail product page is defined as follows:

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

If you have any ideas or suggestions, please feel free to share. Thank you!

Answer №1

Be sure to include the event @on-row-click in your table setup:

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

Then, create a method to navigate to the detail page:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason for Vue router-link failing to work when clicked?

My nav bar component is designed to link to the about page view, but I am experiencing an issue. Despite Chrome indicating that the router-link element should lead to the correct destination when hovered over, clicking on a link does not navigate to the ab ...

Exploring Selenium: Clicking on Auto-Complete Suggestions using Python

Attempting to interact with an auto-complete search bar on the site in order to search for results. Wanting to click on the drop-down element that appears after entering a city name to perform a full city name search and obtain results. Below is the cod ...

Images in assets folder are not showing up in Vue Bootstrap

I'm attempting to showcase an image similar to the example provided in this guide Below is the code I am using: <template> <b-container fluid class="p-4 bg-dark"> <b-row> <b-col> <b-img rounded="ci ...

Searching for related values in a nested array of objects using JavaScript: A guide

My goal for this project is to thoroughly examine the path along with all nested elements within the Items and assign them to the details variable. However, due to the limitations of the function inside the useEffect, I am unable to check nested items eff ...

How can I gather information from members who have already signed up?

I have a form that submits data to the Angular Firebase database. Once the form is submitted, I want to display the previously submitted data in the form if the user signs in again. Below is my .ts file: import { Component, OnInit } from '@angular/c ...

explore the route with the help of jquery scrolling feature

Is there a way to implement scrolling functionality for tab headers similar to this demo? I have a list of elements within a div that I need to scroll like the tabs in the demo. I attempted to achieve this by setting the position of the inner elements to ...

How can I display a clicked-on div while hiding all other divs using jQuery?

I want to create a website where a button can show and hide a specific div, but my challenge is; How can I ensure that clicking on one button hides all other divs? Here is the JavaScript code: function showHide(divId){ var theDiv = document.getEleme ...

Is it feasible to implement automatic window closure on the alternate website?

Imagine I have a website, let's say http://myownsite.com, and my desire is to execute a script that will open a new window on Safari or any other browser for a site which I do not own: http://theothersite.com If I lack control over that specific site ...

Having problems with Javascript and CSS not playing well together?

I have implemented a button from this source, but it does not appear correctly on my page. You can view the screenshot here. It seems like there is a conflict between the saved changes and the CSS. How can I resolve this issue? In addition, I am facing ...

Concentrate on implementing Cross-domain Ajax functionality in Opera browser

For a unique and interesting browsing experience, try using Opera 9.62 to explore the nuances of cross-sub-domain JavaScript calls with Ajax. To understand this better, follow these instructions by placing three simple files on appropriate domains. foo.ht ...

Issues with React's onSelect event functionality are persisting

Is there an event handler in React for the onSelect statement? For example, when a user highlights some text within a paragraph using their mouse, is there a way to trigger an event that extracts the highlighted text? import React, { Component } from &apo ...

How come JavaScript variables are able to persist on JQuery Mobile multi-page templates on desktop browsers, but not on mobile browsers?

My website was created using the jQuery Mobile multi-page template. While testing it on Chrome desktop, I noticed that my JavaScript variables (comics and checkedItems) retain their values when navigating between pages. However, on mobile devices, these ar ...

What is the most effective approach to invoking a handling function within a React component?

While delving into the ReactJs documentation on Handling events, I found myself pondering about the preferred method for invoking a handling function within a component. A simple yet fundamental question crossed my mind: when should one use either onClick ...

Is there a way to automatically zoom in when clicking on a marker and centering the map to that

I have integrated a map into my project where I am currently plotting random coordinates. These coordinates are stored in a data table and everything is functioning smoothly. However, I am facing an issue with implementing a zoom feature using the panTo m ...

Challenge with timing in slideUp and slideDown animations (jQuery)

The element with the class "heady" is designed to slide up when the document height percentage is below 25%. If you scroll back up, it should reappear after a delay of 1400ms. The problem arises when this action needs to repeat, as the class does not sli ...

Tips for personalizing a long press instruction with rxjs in Vue or any other frameworks

I'm currently working on creating a custom longpress or longtouch directive for use in my Vue project. The issue I'm facing is that the code I've written triggers console.log('startObser') after every touch event. Even when there& ...

Error message "The function is not defined" is commonly encountered in node.js programming

I'm having trouble with this section of my code. The error message I receive is: ReferenceError: callback is not defined at C:\js\kweb-hw\routes\board.js:14:13 var express = require('express'); var router = express. ...

Troubleshooting issue with Bootstrap collapse functionality failing with dynamic IDs

Having trouble creating dynamic ids for bootstrap collapsing functionality. I want each topic in an ng-repeat to collapse and display its respective question list when clicked. The issue is that when I click on a second topic, the question list data from ...

Having trouble loading this JSON data into my table

So I have a little challenge on my hands: I've got a JSON file with information about various books, each including details like title, author, and year of publication. The goal is to select an option from the list and display the chosen property in ...

Is it possible for the NextJS Client component to only receive props after rendering props.children?

Encountering a puzzling issue that has me stumped... In my setup, I have a server side component that fetches data and then sends it over to the client component, which is all pretty standard. Here's where things get weird... When I log the data on ...