Vuetify does not refresh datatable after axios request

2
votes

I want to build a simple form and datatable using Vuetify datatable. My datatable get data from api and send data to api. My datatable is filled after page loading and also I can post data using axios. But my problem is, my datatable is not refreshed after I post data via axios. I am using 'created' but it calls my get method EVERY 2 seconds. What am I doing wrong?

<template>
  <v-container fill-height fluid grid-list-xl>
    <v-row justify="center">
      <v-col cols="12">
        <material-card color="green" title="Panel No Tanımlama" text>
          <v-form>
            <v-container class="py-0">
              <v-row>
                <v-col cols="12" md="2">
                  <v-combobox
                    v-model="select"
                    :items="combo"
                    label=""
                  ></v-combobox>
                </v-col>

                <v-col
                  cols="12"
                  md="2"
                >
                  <v-text-field
                    class="purple-input"
                    label=""
                    v-model="etiket"
                  />
                </v-col>

                <v-col
                  cols="12"
                  md="2"
                >
                  <v-text-field
                    class="purple-input"
                    label=""
                    v-model="numara"
                  />
                </v-col>

                <v-col
                  cols="12"
                  class="text-right"
                ><a href="#" class="btn btn-success" @click="submitEntry">
                  <v-btn color="success">
                    Kaydet
                  </v-btn></a>
                </v-col>
              </v-row>
            </v-container>
          </v-form>
        </material-card>
      </v-col>
      <v-col cols="12">
        <material-card color="green" flat full-width title="Tanımlanmmış Panel Nolar" text>
          <v-data-table :headers="headers" :items="items" :items-per-page="5"/>
        </material-card>
      </v-col>
    </v-row>
  </v-container>
</template>

import axios from "axios";

var columnNames = [];
var loop = 0;

export default {
  name: "app",
  data() {
    return {
      headers: [
        {
          sortable: true,
          text: "",
          value: "number"
        },
        {
          sortable: true,
          text: "",
          value: "mac"
        },
        {
          sortable: true,
          text: "",
          value: "label"
        }
      ],
      items: [],
      select: '',
      combo: [

      ],
      etiket : '',
      numara: ''
    };
  },
  mounted() {
    this.fetchItems();
  },
  methods: {
    fetchItems(){
      axios
      .get("http://localhost:8081/getPanel")
      .then(response => {
        this.items = response.data.data;
        this.combo = response.data.combo;
      })
      .catch(e => {
      });
    },
    submitEntry: function(event) {
      axios
        .post("http://localhost:8081/postPanel", {
          mac: this.select,
          label: this.etiket,
          number: this.numara,
        })
        .then(function(response) {
          this.fetchItems();
          this.clearInputs();
        })
        .catch(e => {
        });
    },
    clearInputs: function(event){
      this.select = "",
      this.etiket = "",
      this.numara = ""
    }
  },
  updated:{
    resetData: function (){
      this.fetchItems();
    },
  }
};
1
vue.jsdatatablevuetify.js
The updated object at the end looks suspect to me. Do you not see an error message in the console, like TypeError: handler.call is not a function? – skirtle
Now I'm lost. Your updated section is completely invalid. It needs to be a function, not an object. But you shouldn't be calling fetchItem from an updated hook anyway. The hook is called whenever the component re-renders. Every time the data loads it'll trigger a re-render and that'll then try to reload the data, getting into an infinite loop. The problem with your submitEntry method is that this is not scoped correctly in the inner function. Use arrow functions (or one of the other binding workarounds) instead and it'll work fine. – skirtle

1 Answers

0
votes

As stated by @skirtle, the way you declare your axios .then and .catch functions creates a new scope for this.

All you need is to swicth to arrow function in order to keep this bound to your component's scope.

You then don't need any updated hook anymore. Plus, as stated in comments also, your syntax is wrong for this part. Also, talking about syntax, be sure to be consistent in the way you write your functione declarations and your indents, etc.

Below is the code as it should be:

import axios from "axios";

var columnNames = [];
var loop = 0;

export default {
  name: "app",
  data() {
    return {
      headers: [
        {
          sortable: true,
          text: "",
          value: "number"
        },
        {
          sortable: true,
          text: "",
          value: "mac"
        },
        {
          sortable: true,
          text: "",
          value: "label"
        }
      ],
      items: [],
      select: '',
      combo: [

      ],
      etiket : '',
      numara: ''
    };
  },
  mounted() {
    this.fetchItems();
  },
  methods: {
    fetchItems(){
      axios
        .get("http://localhost:8081/getPanel")
        .then(response => {
          this.items = response.data.data;
          this.combo = response.data.combo;
        })
        .catch(e => {
        });
    },
    submitEntry(event) {
      axios
        .post("http://localhost:8081/postPanel", {
          mac: this.select,
          label: this.etiket,
          number: this.numara,
        })
        .then((response) => {
          this.fetchItems();
          this.clearInputs();
        })
        .catch((e) => {
        // handle error
        });
    },
    clearInputs(event){
      this.select = "",
      this.etiket = "",
      this.numara = ""
    }
  },
  updated(){
    // do something if needed
  }
};