Is there a way to transform a typical hyperlink into a <route-link> component in Vue?

My website has two pages set up for routing:

Home > Results

On the 'Home' page, I have a button/link that is not inside a <route-view/>. I want this button to redirect to Results.vue while passing a parameter.

The parameter, named activeTab, should open the desired vue-tabs. Currently, I am unable to achieve this as it is not receiving any input from the variable.

Here is the code:

Home.vue

<div class="row">
     <Notes refName="Relationship" />
     <Notes refName="Support" />
</div>

...

<script>
import Notes from '@/components/Monthlynotes.vue'

export default {
     name: 'home',
     components: {
          Notes 
     },
</script>

/components/Monthlynotes.vue

<b-card>
     <p class="card-text">{{ refName }}</p>
     <b-link class="right" :activeTab="refName" href="/results">More</b-link>
</b-card>

...

<script>
export default {
  props: {
      refName: String,
  },          
</script>

Results.vue

 <vue-tabs type="pills" v-model="tabName">
   <v-tab title="Relationship">
     <RelDT msg="Results view"/>
   </v-tab>
   <v-tab title="Support">
     <SupDT msg="Results view"/>
   </v-tab>
 </vue-tabs>

...

<script>
import RelDT from '@/components/DataTable.rel.vue'
import SupDT from '@/components/DataTable.sup.vue'

export default {
  name: 'results',
  props: {
    activeTab: String
  },
  components:
    {
      RelDT,
      SupDT,
    },
  data() {
    return {
      tabName: activeTab
    }
  }
}
</script>

App

<router-link :to="{name:'results', param:{activeTab}}">Results</router-link>

How can I ensure that this <b-link> routes properly if it were a <route-link /> instead?

javascriptvue.jsvue-clivue-cli-3

Answer №1

The b-link component in this case also allows for the use of the :to property, as discussed here. The specified value for the property will be sent to the router.push() method.

<b-link :to="{name:'results', param:{activeTab}}">Click here to redirect me</b-link>

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

Defining Higher Order Components in ReactJS: A comprehensive guide

Trying to wrap my head around Higher Order Components (HOC) in ReactJS with this simple example... I've got three files - First.js, Second.js, and App.js. How should I structure these files so that the computations done in the first file can be acces ...

javascriptnode.jsreactjsreact-redux

Using Vue's forEach method in a computed property

I am currently working on a checkbox filter function that saves the value of clicked checkboxes in an array. However, I am encountering issues with updating the computed data as it is always returning undefined. The structure of the data: Casino { brand_ ...

javascriptvue.jsfilternuxt.jscomputed-properties

Angular 2 isn't triggering the custom validator for every keypress

I have implemented a custom validator for Reactive forms in Angular 2. However, I am facing an issue where my function is only validating the first key press in the text field. Ideally, the custom function should validate each key press. Can someone please ...

javascriptangularvalidationangular-reactive-formscustom-validators

Utilizing an Immediate-Invoked Function Expression (IIFE) for jQuery in JavaScript

I'm looking at this code snippet that I believe is an Immediately Invoked Function Expression (IIFE). But, I'm confused about the role of (jQuery) and ($). I understand that it involves passing a reference to jQuery into the IIFE, but can someone ...

javascriptjqueryiife

Vue.js fails to retrieve any data from Google Spreadsheet upon fetching it

Attempting to create a Vuejs web application that fetches data from the Google Sheet API. After testing the API link, the correct data was received. However, upon implementing it into the web application, no data is displayed. To view the code snippet and ...

vue.jsgoogle-sheets

How can I specify the exact width for Bootstrap 3 Progress Bars?

I have a single page that displays all my files in a table format, and I also have the count of open and closed files. My goal is to represent the percentage of closed files using a progress bar. The width of the progress bar should change based on this p ...

javascripthtmlcsstwitter-bootstrap-3

Guide on retrieving dynamic pairs of (key, value) in a JavaScript function

I'm currently working on a function that can generate dynamic key-value pairs. SERVICE: getContentfulEntries(query: QueryEntries, keyQuery?: QueryFilters[]): Observable<any> { const buildQuery = (obj) => { const propName = obj.i ...

javascriptangulartypescript

Is there a way to prevent my smartchatbox from covering my fixed top navbar?

Click here for more information I am seeking assistance. Your help is greatly appreciated. The question's heading reveals all you need to know. All you have to do is resize your browser, scroll down, and the answer will become apparent. ...

javascripthtmlchat

Issue with resetting input forms in ReactJS

I have a simple form that seems to be clearing the rest of the fields every time I try to fill it. Additionally, validation errors are being displayed below each field instead of just one. How can this issue be fixed? Here is how the form looks before any ...

javascriptreactjsweb

Displaying a variety of pictures within an HTML table

I am looking to dynamically load a specific image each time a new row is added to a table, using the following template: LINK However, adding a <td> tag directly in the javascript code has caused unexpected behavior: $(document).ready(function(){ ...

javascriptjqueryhtml

Error is caused by state variable triggering mutation

In my store module, I am encountering an issue with the following pseudo-code: const state = { users: [] } const actions = { addUsers: async ({commit, state}, payload) => { let users = state.users // <-- problem // fetching new users fo ...

javascriptvue.jsstorevuex

Error message: Encountered JavaScript heap out-of-memory error during Azure DevOps React Container Production Build

I am facing challenges in building a React production Docker container with Azure DevOps pipelines. Despite upgrading my build environment and code, the pipeline failed to run successfully. After conducting some research, I attempted to add the "--node-fla ...

javascriptreactjsazure-devopsout-of-memorydocker-build

Discovering the process of obtaining information from a restful API using javascript

I am working on a desktop application using C# (Windows Forms) that includes a web browser component and utilizes JavaScript. My goal is to create a weather forecast for Bulgaria. However, I am unsure about how to retrieve data from the API server. I curr ...

javascriptc#reactjsvisual-studioweb

Tips for maintaining the data in localStorage when the app is rendering

I've encountered an issue with my localStorage implementation in my app. I've set it up to add +1 every time a user visits, but the value resets to 0 whenever the page is refreshed. This is the code snippet in question: localStorage.setItem(& ...

javascriptreactjslocal-storage

Advantages of placing script src tags at the top of the body versus placing them at the bottom of the body

I've heard that it's best to place the script tags right before the closing body tag. However, when I follow this advice, my angularJS expressions don't seem to compute correctly for some reason. When I place the script tags in that location ...

javascriptangularjs

Including additional data to a page after each iteration in order to display the current progress

I am currently working on a loop that iterates through the lines of a text area and processes each line sequentially. However, I am facing an issue where the page becomes unresponsive until all the data has been processed. Is there a way to dynamically u ...

phpjavascriptjqueryajax

What is the process for establishing a key on the request header to authenticate in Node.js?

I am a novice in the world of nodejs. My current project involves creating a basic server that writes JSON data to a CSV file. However, I have encountered a stumbling block: For authentication purposes, the request header must include an “appKey” para ...

javascriptnode.js

Error message: The Edge browser encountered an invalid object when attempting to change input (onChange)

Encountering an issue with "Invalid Calling Object" error in Edge browser while modifying input in my React project. Error message: 0: Invalid Calling Object within react-dom.production.min.js The onChange event is being managed by a bound method that on ...

javascriptreactjsmicrosoft-edge

How can I monitor and handle JavaScript errors without causing TestCafe tests to fail?

As I begin writing TestCafe tests, a problem arose on our website - a JS error in the console causing test failures. While it was satisfying to catch this issue, it also highlighted the fact that even minor JS errors could lead to test failures and hinder ...

javascripttestingerror-handlingautomated-teststestcafe

The mouseup event fails to trigger upon dropping a component with React-dnd

Currently, I am working on a project that requires drag and drop functionality using the React-dnd package. While I have been able to successfully implement this feature, I am facing an issue with the target component where draggable items are supposed to ...

javascriptreactjsreact-dndonmouseup