Revision history [back]

To update tables using axios in Vue/Vuetify 3 while using imported data-returning methods, you would follow these steps:

1. First, create a method to call the axios API and update the table with the response data. This method should take in any relevant parameters needed to make the API call, such as a search query, and then use axios to make the call and update the table with the returned data.

import axios from 'axios'

export default {
  methods: {
    async getTableData(query) {
      const response = await axios.get(`/api/search?q=${query}`)
      this.tableData = response.data.results
    }
  }
}

1. Then, add a button or other input method in your Vue/Vuetify template to trigger the method you just created. This could be a search input with a submit button or a refresh button to update the table data.

<template>
  <div>
    <v-text-field v-model="searchQuery" label="Search"></v-text-field>
    <v-btn @click="getTableData(searchQuery)">Search</v-btn>
  </div>
</template>

1. Finally, in your Vue/Vuetify component, you would import the data-returning method you want to use to populate your table, and then call it in the 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.