The router-link configuration does not translate into HTML code as expected

Question

The router-link configuration does not translate into HTML code as expected

I have set up the Vue table header parameters as follows:

render: (h, params) => {

      return h(
        'router-link',
        {
          props: {
            tag: 'a',
            target: '_blank',
            to: {
              name: 'physicalserverDetails',
              query: {id: params.row.id}
            },

          }
        },
        params.row.name
      )
    }

However, upon checking the generated HTML code, it seems that the target parameter was not included:

<a href="/physicalserverDetails?id=193" class="">CD-Z12</a>

Do you see anything in my configuration that might be causing this issue?

javascript vue.js

Answer 1

Answer №1

In order to include normal HTML attributes like target, the vue.js documentation suggests passing them inside an attrs object. However, when target is defined as a prop in your code snippet, it cannot be included in the resulting anchor tag.

You can test the following code snippet:

render: (h, params) => {
  return h(
    'router-link',
    {
      attrs: {
       target: '_blank'
      },
      props: {           
        to: {
          name: 'physicalserverDetails',
          query: {id: params.row.id}
        }
      }
    },
    params.row.name
  )
}

Answer 2

In order to include normal HTML attributes like target, the vue.js documentation suggests passing them inside an attrs object. However, when target is defined as a prop in your code snippet, it cannot be included in the resulting anchor tag.

You can test the following code snippet:

render: (h, params) => {
  return h(
    'router-link',
    {
      attrs: {
       target: '_blank'
      },
      props: {           
        to: {
          name: 'physicalserverDetails',
          query: {id: params.row.id}
        }
      }
    },
    params.row.name
  )
}

The router-link configuration does not translate into HTML code as expected

Answer №1

Similar questions

Guide on how to send users to a personalized 404 page on remix.run

Vue.js Pagination Issue - Current Page Number Beyond Maximum Page Limit

Creating a dynamic JSTree that loads data on demand using Stored Procedures

Utilizing State Variables Across Modules in ReactJS: A Guide

Retrieving the value of a checkbox in a React custom checkbox component

What is the optimal approach for setting up multiple routes for a single component in Vue router?

Error: Unable to access property 'camera' as it is undefined

In the case that the parent contains a child class, consider using CSS or JQuery to conceal the second child class within the

Encountered issue with Ajax post request without any additional details provided

The transfer of variables from AJAX to PHP is not working

Ways to display or conceal an input based on the chosen option in a select input?

Retrieving information from a MySQL database to incorporate into D3 for the purpose of generating a line chart

What is the logic behind the code returning the odd number in the array?

``Enhanced feature allowing users to input different zip codes in a weather

What is causing the PHP AJAX MySQL Chat Script to require a page refresh?

Extract JSON data from a web address

The menu starts off in the open position when the page loads, but it should remain closed until it

JS API call returns an undefined variable

Unable to sign out user from the server side using Next.js and Supabase

What would be the JavaScript counterpart to python's .text function?