How can one generate a custom link using vue-router in Vue.js after the rendering process has been completed?

Currently, I am utilizing VUE and I must say, boostrap-table is performing admirably!

Within my component, I have the following:

<BootstrapTable :columns="table.columns" :data="table.data" :options="table.options"></BootstrapTable>

The table is being populated by axios with no issues.

However, I am encountering difficulties when attempting to update the table with calculated data obtained via axios. I am curious if there are any "best practices" for achieving this. Essentially, I aim to create a custom link in the first column using the id received from axios, while also making use of the vue router.

Upon receiving the axios data, I create a custom array newData and proceed to update the table using:

this.$nextTick(function () { this.table.data = newData });

The array includes a custom link like

link: '<a v-bind:href="club/'+team.id+'">'+team.team+'</a>',

or

 link: "<router-link :to=\"{'name': 'team',\'params\': { 'id':"+ team.id+" }}\">"+ team.team+"</router-link>",

However, this is displayed as plain text and is not rendered.

Presently, I have resorted to using:

link: "<a href='/club/" + team.id + "'>" + team.team + "</a>",

While this works, it inevitably reloads the entire page instead of utilizing the VUE router...

Any recommendations? Could the vue render() function be of assistance? If so, how?

javascriptvue.jsvue-routerbootstrap-table

Answer №1

Resolved by utilizing events in the specific column. This particular column contains the generated link:

                  columns:
                        [
                       {...},
                       {
                        field: 'match',
                        title: 'Match',
                        formatter (value, row) {
                            return `<a href="/matches/${row.pos}">${value}</a>`
                        },
                        events: {
                            'click a': (e, value, row, index) => {
                               e.preventDefault();
                                this.$router.push(`/matches/${row.pos}`)
                                }
                           }
                         },
                        {...}]

Find the solution 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

I am having issues with the accuracy of my JavaScript number validation function

function CheckIfNumeric() { var quantity = jQuery("#txtShippedQuantity").val(); quantity = quantity.toString(); for (i = 0; i < quantity.length; i++) { var character = quantity.charAt(i); if (isNaN(character)) { ...

javascriptjqueryasp.nethtmlvalidation

Tips for accessing an Angular service from different Angular controllers

I am a beginner with angular js and I am currently exploring ways to call the service provided in the code snippet below from a controller. The service is defined as follows. app.factory('myappFactory', ['$http', function($http) { v ...

javascriptangularjs

Establish a connection to couchDB using JavaScript on the server side

I'm working on a piece of code that involves using Restify to set up a server in node.js and create specific routes. My goal is to interact with CouchDB by performing actions such as GET, POST, DELETE, and PUT. var restify = require("restify"); var s ...

javascriptajaxhttpcouchdbnosql

Error TS2322: Type 'boolean' cannot be assigned to type 'undefined'. What is the best approach for dynamically assigning optional properties?

I am currently working on defining an interface named ParsedArguments to assign properties to an object, and here is what it looks like: import {Rules} from "../Rules/types/Rules"; export interface ParsedArguments { //other props //... ...

javascripttypescripttypechecking

How to populate a database with Facebook data by utilizing AJAX post and PHP

I've been developing a Facebook Canvas game and had it running smoothly on my localhost along with a local database via phpMyAdmin. However, after moving it online, I've encountered an issue with the database. Previously, the game would grab pla ...

javascriptphpmysqlajaxfacebook

Interactive Chart with Angular for Multiple Selections

I have a single page with a list menu By utilizing the list menu, I am able to generate various types of charts such as line chart, bar chart, pie chart, and more. However, I would like the previously selected charts, like the line chart, pie chart, etc. ...

javascriptjqueryangularjschartshighcharts

Hiding BottomTabNavigator on specific screens using React Navigation (4.x)

Looking for a way to hide the bottom tab navigator specifically in the 'Chat' screen of my React Native and React Navigation app. Here is what I have so far: const UserNavigation= createStackNavigator({ Profile:{screen:Profile}, Search:{ ...

javascriptandroidreactjsreact-navigation

What strategies can be implemented to improve the total blocking time in Vue for optimal performance

I'm facing a challenge that I can't seem to resolve. My page has a high total blocking time (2+ sec). Despite trying to load every vue component asynchronously, the issue persists with 2+ sec TBT. I'm puzzled by what could be causing such a ...

javascriptvue.jsasynchronousoptimization

Using computed properties with Nuxt's `head` property can result in error messages being displayed

While utilizing Nuxt.js, I am using head() { } method to configure SEO metadata. However, when accessing computed properties within this method, Vetur displays the following message: Property 'domain' does not exist on type 'CombinedVueInst ...

typescriptvue.jsnuxt.jsvetur

Updating the state of an object nested within another object in React JS

So, I have a nested object within another object and I need to update the state of one or more properties in the inner object. This is my current state: const [products, setProducts] = useState({ name: '', type: '', price: '& ...

javascriptreactjsspread

Utilize Jquery to transform 3 arrays into separate objects distinguished by unique IDs

Recently, I've been experimenting with a very simplistic jquery admin area menu. My goal is to have jQuery create 3 identical menus with different IDs. I was able to accomplish this by creating a function and calling it three times with various variab ...

javascriptjqueryarrays

When transitioning between pages in Nuxt 3, the Three JS object fails to load

As I embark on this journey, I realize there is so much for me to discover. Despite my aversion to seeking help, I have scoured countless pages in search of a solution, but to no avail. It seems like a simple issue, yet I find myself struggling. Whenever ...

vue.jsthree.jsnuxt.jslifecyclevue-composition-api

How can Observables be designed to exhibit both synchronous and asynchronous behavior?

From: Understanding the Contrasts Between Promises and Observables In contrast, a Promise consistently operates asynchronously, while an Observable can function in synchronous or asynchronous manners. This presents the opportunity to manipulate code in ...

javascriptangulartypescriptasynchronousrxjs

Tips for developing a dynamic form with Vue.js using Vuetify

I am in the process of creating a dynamic form that needs to function properly. Within my array of competences, there is a skills array. Each skill within a competence needs to be evaluated, requiring a corresponding answer. My setup involves a v-stepper ...

javascriptvue.jsvue-componentvuetify.js

Tips for organizing a multi-layered object based on an internal value

I am currently facing a challenge in sorting a complex object. Here is the structure of the object: [{ "searchResultProperties": [{ "key": "message_time", "value": 1542088800000 }, { "key": "size_byte AVG", "value": ...

javascripttypescriptecmascript-6

Do not forget to implement Array.find when working with the useSWR hook in Next.js

I have the following code: const fetcher = (url: string) => axios.get(url).then((r) => r.data); const {data} = useSWR("api/data", fetcher, {refreshInterval: 10000}) console.log(data.find(d => d.id === "123")) The API path is ...

javascriptnext.js

Using a custom font with Next.js and Tailwind: Font applied successfully but not displaying correctly

In my project with Next.js (9.4.4) and Tailwind.css (1.4.6), I am incorporating a custom font named SpaceGrotesk. To ensure its functionality, I stored the font files in public/fonts/spaceGrotesk, and then adjusted my configurations as below: // next.confi ...

javascriptreactjswebpacknext.jstailwind-css

Executing a jQuery.ajax call using a proxy server

I'm currently working on a Chrome extension and I have encountered an issue. When making a jQuery.ajax request for a standard HTTP page from a page served via HTTPS, Chrome blocks the request. This has led me to consider if it would be feasible to ret ...

javascriptjqueryajaxproxy-server

Enhancing the menu/navigation bar with individual AJAX loaders

I have chosen the Vivant Designs theme for our website, which can be found at What I am looking to achieve is an ajax loader that will appear next to the link or tab when a user clicks on a link within the drilldown menu located on the left side. The cont ...

javascriptjqueryhtmlajax

Designing an interactive header interface using React and Material UI

My header.jsx file contains the following code: // Default Import Statements var Login = require(login.jsx) const HeaderComponent = React.createClass({ getInitialState () { return { loggedIn: false, }; }, render() { return ( ...

javascriptjqueryreactjsmaterial-ui