When using @click as a link, it results in an

I'm attempting to create a clickable row in a datatable that functions as a link. Placing a standard <nuxt-link> within a <td> works fine, but wrapping the entire <tr> disrupts the table layout.

Next, I tried using @click with a method, which resulted in a 404 error: TypeError: Cannot read property 'nuxtLink' of undefined


<tbody class="bg-white">
    <tr
        v-for="(productCard) in productList"
        :key="productCard.acquisitionCost"
        :class="[
            'hover:bg-gray-50',
            'transition',
            'ease-in-out',
            'duration-150',
            'cursor-pointer'
        ]"
        @click="goToProduct()"
    >
        <td
            class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500"
        >
            {{ productCard.oVariant }}
        </td>
        <td
            class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
        >
            <div class="text-sm leading-5 text-gray-900">{{ productCard.gear }}</div>
            <div class="text-sm leading-5 text-gray-500">{{ productCard.motor }} hk</div>
        </td>
        <td
            class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
        >
            <div class="text-sm leading-5 text-gray-900">{{ productCard.fuelType }}</div>
            <div class="text-sm leading-5 text-gray-500">{{ productCard.economy }} km/l</div>
        </td>
        <td
            class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
        >
            Tom
        </td>
        <td
            class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
        >
            Tom
        </td>
        <td
            class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-cool-gray-700"
        >
            DKK <b>{{ productCard.monthlyPrice }},</b>- mdl.
        </td>
        <td
            class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
        >
            <nuxt-link
                :to="productCard.nuxtLink"
            >
                <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                </svg>
            </nuxt-link>
        </td>
    </tr>
</tbody>


methods: {
    goToProduct: function () {
        location.href = this.productCard.nuxtLink
    }
}

Any suggestions on how I can make the entire row act as a link?

javascriptvue.jsvuejs2vue-componentnuxt.js

Answer №1

To utilize the productCard, you should pass it to the method:

@click="goToProduct(productCard)"

Subsequently:

goToProduct: function (productCard) {
  window.location.href = productCard.nuxtLink
}

Instead of directly setting the href, consider interacting with the router for a more optimal approach.

Answer №2

To follow @Skirtle's advice, it is best to pass the productCard as a parameter and utilize it within the method:

@click="goToProduct(productCard)"

Instead of using location.href to redirect to the specified URL, it is recommended to leverage Nuxt.js functionality such as the $router instance like so:

this.$router.push({path: productCard.nuxtLink})

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

Mastering the art of managing promises within nested loops

Embarking on my Promise journey, I find myself faced with a scenario where a list of objects within another list of objects needs to be updated based on responses from an external API. I've attempted to simulate the scenario below. The code snippet f ...

javascriptnode.jsecmascript-6promise

What steps need to be taken to utilize the fast-json package within a web browser environment?

In my quest to enhance the performance of my apps, I stumbled upon two intriguing packages. Currently, I am working on a forum-style app that constantly receives and processes information from APIs. Despite optimizing my frontend JavaScript to the best of ...

javascriptnode.jsnpmrequirejs

What is the procedure for assigning an element's background-color to match its class name?

Is there a way to use jQuery to make the background color of a span element match its class? $(function() { $("span").css("background-color") }); span { display: inline-block; width: 5px; height: 5px; border: solid #0a0a0a 1px; } <script src= ...

javascriptjqueryhtmlcss

Establish a connection between the Discord Bot and a different channel

I need help with my Discord bot that should redirect someone to a different channel when they mention certain trigger word(s). I feel like there might be a missing line or two of code that I need to add to make it work properly. bot.on("message", messag ...

javascriptjsonbotsdiscorddiscord.js

Improving React Efficiency: Should You Utilize Memoization of Axios GET Request Using useMemo or useCallback?

My Objective: I am currently working on a sizable function named getUnitedStatesCases, which involves making an Axios GET Request and performing various operations with the received data. I have already implemented it within a useEffect hook upon componen ...

javascriptreactjsreact-nativereact-hooks

Is there a way to enlarge an iFrame to fill the entire screen with just a button click, without using JavaScript

I am currently attempting to achieve full screen mode for an iFrame upon clicking a button, similar to the functionality on this site. On that website, there is a bar that expands to full screen along with the embedded game, which is what I am aiming for. ...

javascripthtmliframefullscreen

When utilizing the multipart/form-data content type in a form, the files being sent are transmitted as blank

I am currently developing a VueJS component that functions as a form to collect user information and enable multiple image uploads. The form is set with enctype="multipart/form-data" and exhibits the following structure : <template> <div> ...

javascriptfileexpressvue.jsmultipartform-data

Vuejs Namespaced Mixins

Creating a namespaced mixin is something I am interested in achieving. Let's use the example of a notification mixin: (function() { 'use strict'; window.mixins = window.mixins || {} window.mixins.notification = { met ...

javascriptvue.js

Unable to call Success function in JQuery AJAX request

Here is a simple JQuery ajax request I am working on: $.ajax("../ajax/data/items.json", { success: setContent, type: "GET", dataType: "json" }); function setContent(data, status, jqxhr) { alert("Hello!"); } The json file loads successfully with a 200 r ...

javascriptjqueryjsonajax

Generate dynamic routes in Next.js only when needed

I'm currently working on a project using NextJS to create a frontend for a database that contains thousands of products, with the expectation of significant growth. The site/products/ route is functioning well, but I wanted to add a route to view indi ...

javascriptreactjsnext.js

nodejs express routing issue resulting in not found error

I recently started a new node project and wanted to enhance my route adding capabilities. In the past, I only went one level deep with folders, but this time I wanted to go further. To achieve this, I created a recursive function that adds routes and navig ...

javascriptnode.jsrecursionexpress

Select a Date: Input for Date Selection

Is it possible to restrict the selection of certain days using HTML date input validation? Some booking websites have a feature where an interactive calendar only allows users to select specific dates for events, while others are greyed out and cannot be c ...

javascriptphpjqueryhtmldate

The event.currentTarget's attempt to toggle the class of the child element is not functioning as

I am having trouble toggling a class of a child element of the target element. I can't seem to get it to work and I'm unsure of what steps to take next. HTML: <div class="post-footer-icons-container-el" data-btntype="comment&qu ...

javascriptjqueryjquery-ui

Why is the 'name' property used in the export default{} syntax?

Vuejs is my current learning focus, and one thing that puzzles me is the necessity of this particular name. <template> </template> <script> export default { name: 'NotFound' } </script> <style> </style&g ...

javascriptnode.jsecmascript-6vue.js

Recreating elements in ng-repeat using ng-click conditionally

I am attempting to swap an anchor tag with an image when clicked by the user. The code snippet I'm using looks like this: <div ng-repeat="postpart in currentPost.parts "> <div ng-if = "!postpart.isclicked"> <img ng-src= ...

javascriptjqueryangularjsif-statementdom

What is the best way to run a series of basic commands in Node.js in sequence

Is there a way to execute 4 bash commands sequentially in nodejs? set +o history sed -i 's/&& !this.peekStartsWith('\/\/')/ /g' dist/vendor.bundle.js sed -i 's/&& !this.peekStartsWith('\/\/ ...

javascriptnode.jsnpmnpm-scripts

React error: Objects cannot be used as children in React components

Upon trying to display data using REACT, an error message stating "Objects are not valid as a React child. If you meant to render a collection of children, use an array instead" is encountered. The issue arises when fetching records from a MongoDB collect ...

javascriptnode.jsreactjsexpressmern

What could be the reason behind ng-bind-html only displaying text and not the link?

Utilizing ng-repeat to exhibit a list on my webpage. One of the fields in my data contains a URL that I want to display as an actual link within my HTML page. Please refer to the screenshots below: My HTML: My rendered page: I have included the angular- ...

javascripthtmlangularjs

What is the reason behind material-ui's decision to invoke their dialogs twice?

After attempting to implement a modal and realizing the strange behavior, I switched to using a dialog instead. To my surprise, the issue persisted. This is how I approached it: import Dialog, { DialogProps } from '@material-ui/core/Dialog'; imp ...

javascriptreactjstypescriptecmascript-6material-ui

Perform an HTTP POST request in Angular to retrieve the response data as a JSON object

I am currently in the process of developing a simple user authentication app. After completing the backend setup with Node.js and Passport, I implemented a feature to return JSON responses based on successful or failed authentication attempts. router.pos ...

javascriptjsonnode.jsangularangular2-services