Question

我想使用Vuetify数据表构建一个简单的表单和数据表。我的数据表从api获取数据并将数据发送到api。页面加载后，我的数据表已填满，我也可以使用axios发布数据。但是我的问题是，通过axios发布数据后，我的数据表没有刷新。我正在使用“ created”，但是每隔2秒就会调用我的get方法。我在做什么错了？

<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();
    },
  }
};

Answer 1

如@skirtle所述，声明axios .then和.catch函数的方式为this创建了新作用域。

您所需要做的只是旋转箭头功能，以使this绑定到组件的作用域。

然后，您不再需要任何updated钩子。另外，正如注释中所述，这部分的语法错误。另外，在谈论语法时，请确保在编写函数声明和缩进等方式上保持一致。

下面是应有的代码：

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
  }
};

在axios请求后，Vuetify不会刷新数据表

1 个答案: