Unable to refresh the page using the router link

When I click on a list item that sends itself as parameters to the routerlink, it works fine. However, when I click on another list item again, it doesn't change the page. Can someone provide guidance on this issue?

This snippet is from Router.js:

{
  path: '/works/:sort_id',
  name: 'WorksView',
  component: WorksView,
 }

And this code is from nav.vue:

        <ul v-for="(nav, index) in navSorts" :key="index">
            <router-link :to="{name: 'WorksView', params: {sort_id: nav.title}}"><p>{{ nav.title }}</p></router-link>
            <li v-for="(sort, index) in nav.sort" :key="index">
              <router-link :to="{name: 'WorksView', params: {sort_id: sort}}"><p>{{ sort }}</p></router-link>
            </li>
          </ul>

Answer №1

If Vue router in your situation is only changing the params and not the route itself, it will not recreate the component. To force a re-render of a specific part of your template, you can use the :key prop.

For instance:

<some-component :key="$route.params.sortId">

You can also utilize Watchers to manage changes in route params and perform actions like making a fetch request with the new sort parameter. See an example of reacting to params changes here.

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

How can we determine if a v-for loop in Vue.js that includes a v-if condition has rendered any elements?

In the scenario where the code below is implemented: <template v-for="(item, index) in items" v-if="item.name === 'foo'"> <p>{{ item.name }}</p> </template> Is there a way to display a message if this loop doesn' ...

Updating DOM elements in AngularJS based on search results and user clicks

I have a query regarding my angular web app, which includes an ajax call for json-formatted dates to display them in a table. The app features a search input, two sorting buttons (for age or name), and a profile sidebar element. I have successfully update ...

Adding images to HTML using JavaScript below existing images

I'm currently working on a JavaScript game and I want to implement a feature where my character can move under blocks (isometric PNG images) instead of just sliding through them. Is there a way to dynamically adjust my character's position in the ...

Sorting feature fails to function properly when used in combination with pagination and

<table> <thead> <tr> <th class="col-md-3" ng-click="sortDirection = !sortDirection">Creation Date</th> </tr> </thead> <tbody> <tr dir-paginate="item in items | filter:itemFilter | items ...

Finding the index of specific rows in an iview vue Table

Is there a way to retrieve the index of selected rows in a Table component within an iview vue framework? For instance, let's consider the following table structure: <Table ref="selection" :columns="columns4" :data="data1" @on-selection-change="up ...

Change to the parent frame using webdriver

I am facing an issue while trying to switch to the parent frame or iFrame using webdriver.js. Although I have implemented a function that works, it only goes up to the second level of frames. When attempting to switch to the parent frame from a deeper fr ...

Identifying iOS 5 or above using JavaScript

I've been experimenting with this code snippet to check if the browser is iOS 5 or newer (found on this Stack Overflow thread Detect iOS version less than 5 with JavaScript). function iOSversion() { if (/iP(hone|od|ad)/.test(navigator.platform)) ...

The crossIcon on the MUI alert form won't let me close it

I am facing an issue with my snackBar and alert components from MUI. I am trying to close the alert using a function or by clicking on the crossIcon, but it's not working as expected. I have used code examples from MUI, but still can't figure out ...

What is the best method for retrieving an array stored within a Json object?

Upon receiving a JSON response, my goal is to extract all project names listed within. After trying the usual method of iterating through arrays, I realized that in this case, "d" is not an array itself. How can I go about retrieving the desired result? ...

Using jQuery to restrict the occurrence of Ajax POST requests to once every 10 seconds

I created an interactive wizard using HTML that displays multiple panels. Users can navigate through the panels using a Next button and there is also a Finish button available. Whenever the user clicks on the next button, I have set up a click handler to s ...

Tips on perfecting styles in vuetify 3 sans the need for !important declarations in CSS

Is there a way to customize the styles for the component more precisely? I am looking to modify the border colors for various events such as hover, focus, and validation errors. For instance, I would like the border color to change to blue on hover, and t ...

Issues arise when JQuery functions fail to execute

This unique program showcases a series of error messages that are designed to appear under specific conditions. These conditions are identified through PHP code, following which the essential JQuery script is echoed via PHP to display the messages. Initia ...

Change the source of another element when clicked

Check out the fixed version of previously broken code here I am facing challenges in changing an attribute on another element from a click function sniping $('#black').click(function() { $('#blackbox').slideToggle('slow&apos ...

Ways to update child components dynamically from parent in Vue.js

In my project, I have created a form that includes custom components such as custom-input and custom-button, all wrapped in my custom-form component. Each custom component, with the exception of custom-form, features a disabled prop. My goal is to automati ...

What is the reason behind the TypeError thrown when attempting to assign to `NaN` or `undefined` in JavaScript

A.S.: The question pertains to the type of error rather than the phenomenon itself "use strict" results in a TypeError when system variables like NaN and undefined are modified. But why is it categorized as a TypeError instead of a SyntaxError? Edit: I ...

Using AngularJS to encapsulate an externally loaded asynchronous library as a service

Is there a way to wrap a 3rd party library that loads asynchronously into an Angular service? What is the best practice for incorporating such libraries as services in Angular? Currently, I am approaching it like this: angular.module('myAPIServices ...

Problems arising in AWS integration with Django backend and Vue.js frontend

My Django backend is currently deployed on AWS Elastic Beanstalk with default settings and auto-scaling environment type set to single instance. Meanwhile, the Vue.js frontend is being hosted on AWS S3, configured with CloudFront and now running on HTTPS f ...

Asset in Laravel Vue Vite is being rejected

While working with Laravel Inertia and Vite on my local machine, everything runs smoothly. However, I have encountered a problem that has left me stumped. Whenever I try to access my application from another device, I run into an issue where two JS files ...

Translating SQL Query Results to JavaScript Array

I am currently working on creating a video gallery with blueimp. You can find the documentation for blueimp here. I am facing a challenge as I am not very experienced with MySQL and need some guidance on how to retrieve query results containing YouTube URL ...

Is there a way to define type information for a global variable when utilizing dynamic import within a function?

Here is a simplified version of my server code: server.ts import google from "googleapis"; const androidPublisher = google.androidpublisher("v3"); app.use('something', function(req, res, n){ ... }) ...(only one of the dozens of other meth ...