title: Vue + Vuetify + Axios + Django : CRUD data table
body: <p>I am trying to build a Vuetify CRUD using AXIOS. I am able to do CRUD operations, but am not able to display the newly added data till the page is refreshed. When I select edit, I am not able to see the existing data while editing. The editable dialog box shows empty.
  Please help me if to resolve this.</p>
  <p>Here is my script</p>
  <pre><code>import Navbar from '../components/Navbar.vue'
  import { getAPI } from '../axios-api'
  // import DataService from &quot;../services/DataService&quot;;
    export default {
      data: () =&gt; ({
        dialog: false,
        dialogDelete: false,
        headers: [
          { text: 'ID', align: 'start', value: 'id',},
          { text: 'Length', value: 'size' },
          { text: 'Weight', value: 'weight' },
          { text: 'Actions', value: 'actions', sortable: false },
        ],
        info: [],
        editedIndex: -1,
        editedItem: {
          ID: '',
          Weight: 0,
          Length: 0,
        },
        defaultItem: {
          name: '',
          Weight: 0,
          Length: 0,
        },
      }),
      components:{
              Navbar
          },
  
      computed: {
        formTitle () {
          return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
        },
      },
  
      methods: {
        initialize () {
          getAPI.get('calibration/sizeweight')
          .then(response =&gt; {
          this.info = response.data
        })
        },
  
        editItem (item) {
          this.editedIndex = this.info.indexOf(item)
          this.editedItem = Object.assign({}, item)
          this.dialog = true
        },
  
        deleteItem (item) {
          this.editedIndex = this.info.indexOf(item)
          this.editedItem = Object.assign({}, item)
          this.dialogDelete = true
        },
  
        deleteItemConfirm () {
          this.info.splice(this.editedIndex, 1)
          this.closeDelete()
          getAPI.delete('calibration/sizeweight/'+this.editedItem.id)
          .then(response=&gt;{
          console.log(response)
          })
        },
  
        close () {
          this.dialog = false
          this.$nextTick(() =&gt; {
            this.editedItem = Object.assign({}, this.defaultItem)
            this.editedIndex = -1
          })
        },
  
        closeDelete () {
          this.dialogDelete = false
          this.$nextTick(() =&gt; {
            this.editedItem = Object.assign({}, this.defaultItem)
            this.editedIndex = -1
          })
        },
  
        save () {
          if (this.editedIndex &gt; -1) {
            Object.assign(this.info[this.editedIndex], this.editedItem)
            getAPI.put('calibration/sizeweight/'+this.editedItem.ID,{id:this.editedItem.ID ,weight:this.editedItem.Weight,size:this.editedItem.Length})
            .then(response=&gt;{
              console.log(response)
              this.initialize()
            })
          } else {
            this.info.push(this.editedItem)
            getAPI.post('calibration/sizeweight',{id:this.editedItem.ID ,weight:this.editedItem.Weight,size:this.editedItem.Length})
            .then(response=&gt;{
              console.log(response)
              this.initialize()
            })
            .catch(error =&gt; { console.log(error.response.data)})
          }
          this.close()
        },
      },
  
      watch: {
        dialog (val) {
          val || this.close()
        },
        dialogDelete (val) {
          val || this.closeDelete()
        },
      },
  
      created () {
        this.initialize()
      },
  
  
    }
  &lt;/script&gt;
  </code></pre>