To update tables using axios in Vue/Vuetify 3 while using imported data-returning methods, you would follow these steps:
import axios from 'axios'
export default {
methods: {
async getTableData(query) {
const response = await axios.get(`/api/search?q=${query}`)
this.tableData = response.data.results
}
}
}
<template>
<div>
<v-text-field v-model="searchQuery" label="Search"></v-text-field>
<v-btn @click="getTableData(searchQuery)">Search</v-btn>
</div>
</template>
mounted
lifecycle hook to populate your table initially. You can also use this method to update the table with new data when the input method is triggered.<template>
<div>
<v-data-table :items="tableData" :headers="tableHeaders"></v-data-table>
</div>
</template>
<script>
import { getData } from "@/api/dataMethods"
export default {
data() {
return {
tableHeaders: ["name", "age", "email"],
tableData: []
}
},
methods: {
async getTableData(query) {
const response = await axios.get(`/api/search?q=${query}`)
this.tableData = response.data.results
}
},
mounted() {
this.tableData = getData()
}
}
</script>
In this example, we are importing a getData()
method from @/api/dataMethods
and calling it in the mounted
hook to initially populate the table with returned data. When the user performs a search, the getTableData()
method is called with the search query, and the table is updated with the resulting data from the API call.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2023-06-15 04:33:01 +0000
Seen: 11 times
Last updated: Jun 15 '23
What is the solution for correcting the Axios CORS error that prohibits multiple origins?
Is the Django server not receiving the anticipated cookie header in the Axios request?
How to send API requests to a different docker container, using NextJS and NodeJS?
How can the Axios and React JS error code of 400 (Bad Request) be explained and handled?
What is the method for altering the color of the input text in a TextFormField in Flutter?
What is the procedure for utilizing the node-rdpjs library?
What is the method to change a PDF file to an Excel file using C#?
What is the method to make a TextButton inactive when the text field has no text?