I am struggling with writing a function in my VueJS template that sends a request to the backend API with a specific key and then displays the JSON response in a table.
For example, here is a sample of the JSON data:
{"driver_id":1,"driver_name":"{driver_first_name}, {driver_last_name}","driver_truck":"13","driver_trailer":"83","driver_status":"driving","has_violations":false},
{"driver_id":2,"driver_name":"{driver_first_name}, {driver_last_name}","driver_truck":"58","driver_trailer":"37","driver_status":"sleeping","has_violations":true},
{"driver_id":3,"driver_name":"{driver_first_name}, {driver_last_name}","driver_truck":"80","driver_trailer":"27","driver_status":"driving","has_violations":true}Below is the code snippet I'm working on:
<template>
<b-container fluid>
<!--Search Controls-->
<b-row>
<!-- Search controls go here -->
</b-row>
<!--Search Controls-->
<b-table show-empty
stacked="md"
:items="items"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:sort-direction="sortDirection"
@filtered="onFiltered">
<!-- Templates for displaying different data from the JSON response -->
</b-table>
<b-row>
<!-- Pagination component goes here -->
</b-row>
</b-container>
</template>
<script>
export default {
// Data, computed properties, methods
}