I'm relatively new to working with javascript and vue/vuetify.
Currently, I have a v-data-table that I can fill with static data. However, I'm looking to populate it upon clicking through a Flask API call.
This is what I have so far:
index.html
<v-data-table
:headers = "headers"
:items="citylist"
:items-per-page="10"
caption = "City List"
class="elevation-1"
fixed
style="max-height: 300px; overflow-y: auto"
>
</v-data-table>
main.js
const app = new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
headers: [
{
text: 'cityname',
align: 'left',
sortable: 'false',
value: "cityname"
},
{ text: "index", value: "index" }
],
citylist: [],
.....................................
methods: {
get_data(sortorder) {
const self = this
const url = `api/citylist?order=${sortorder}`
fetch(url).then(res => res.json())
.then(json => self.citylist = json['citylist'])
}
}
})
It seems my approach isn't quite correct. Any suggestions on how to update the citylist properly?
Just a quick update, the JSON data now appears like this:
{
"citylist": [
{
"cityname": "Valletta",
"index": 13
},
{
"cityname": "Lisbon",
"index": 11
},
{
"cityname": "Nicosia",
"index": 11
},
{
"cityname": "Athens",
"index": 10
}