I have a Vue table - I would like to select an item in a row and then load a page that shows the details for the item using Chart.js
I can select the item and load the json for the selected record OR I can load the page passing the url and hard code a record ID in the js file - struggling to understand how to load the detail passing the record ID.
To load the json for the record the following code works:
. . .
<tbody>
<tr v-for="item in items | filterBy searchText | orderBy sortparam order">
<td>@{{item.provider_name}}"</td>
<td>@{{item.city}}</td>
<td>@{{item.rating}} %</td>
<td>@{{item.discussed}} %</td>
<td>@{{item.communicated}} %</td>
<td>@{{item.professional}} %</td>
<td><a href="/surveyvisual/@{{item.ccn}}" > @{{item.ccn}} </a></td>
</tr>
</tbody>
...
And to return the json
...
public function show($ccn)
{
$ccn = Provider::where('ccn', '=', $ccn)->get()->toArray();
}
...
If I hard code the parameter in the js file rendering the chart then I can load the page and show the details - the following code brings in the correct data
...
var apiVisURL = '[url to return json]';
function test() {
return $.getJSON(apiVisURL + '77001');
}
$.when(test()).then(function (myData) {
var canvas = document.querySelector('canvas');
fitToContainer(canvas);
function fitToContainer(canvas){
// Make it visually fill the positioned parent
canvas.style.width ='50%';
canvas.style.height='100%';
// ...then set the internal size to match
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
Array.prototype.mapProperty = function(property) {
return this.map(function (obj) {
return obj[property];
});
};
...
Obviously more code in the above to set al the data elements of the chart - and the chart renders correctly for the record I have hardcoded.
Any hints or recommendations on how to pass the selected record id to the js file building the chart appreciated.
UPDATE: I should have stated that I have to js files - one for the Vue to render the table and one for the Chart.