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!