Presenting information in a Bootstrap table with Vue.js
I have gathered the necessary data and now I want to showcase it in a table using bootstrap. Currently, I have achieved this using SCSS as shown in the image below:
https://i.sstatic.net/XN3Y4.png
Although I am not proficient in JavaScript or Vue, I need to accomplish this quickly.
resources: [{
id: 1,
name: 'Resource 1',
monthlyState: {
january: 120,
february: 280,
march: 45,
april: 40,
may: 35,
august: 60,
september: 65,
october: 75,
november: 80,
december: 20
}
}, {
id: 2,
name: 'Resource 2',
monthlyState: {
february: 280,
march: 45,
april: 40,
may: 35,
june: 37,
july: 40,
august: 60,
september: 65,
october: 75,
november: 80,
december: 20
}
}, {
id: 3,
name: 'Resource 3',
monthlyState: {
january: 120,
february: 280,
march: 45,
april: 40,
may: 35,
june: 37,
july: 40,
august: 60,
september: 65,
october: 75,
november: 80,
december: 20
}
}],
}),
However, my current template structure is very basic:
<template>
<div>
<b-table :fields="fields" :items="resources">
</b-table>
</div>
</template>
....
fields() {
},