[Vuejs]-Creating a link in VueJS to pass JSON value

by

0👍

I think you are looking for props (properties). In your case that could look like:

<template-b driver-id="{{ driver_id }}"></template-b>

The driver-id prop can be used within Template B:

// Modified example from the VueJS documentation
Vue.component('template-b', {
    // Accept the 'driver-id' property
    props: ['driverId'], // props are camelCase in JavaScript
    template: 'Print results for {{ driverId }}'
});

Inside template B, you could fetch the data from the server, using AJAX. This data can be stored and used within template B.

It’s up to you how and where you want to show template B. For example: store the driver_id of the clicked row in the state of template A. Next: check if that driver_id has a value, and show template B:

<template-b v-if="driver_id" driver-id="{{ driver_id }}"></template-b>

The driver_id comes from state of template A. Whenever you click on a button inside a different row, you simply update the driver_id in the state, and template B will update automatically. Note that you should create a watch on the driver_id prop inside template B.

👤Matthijs

Leave a comment