Vuetify v-simple-table 加载状态

Question

我正在尝试在 v-simple-data 中显示加载状态，但由于某些原因，它不起作用，也许还有其他方法可以做到这一点？

这是我的代码：

https://codesandbox.io/s/vuetify-template-forked-bmobx?file=/src/App.vue

Answer 1

您正在超时之外重置 dataLoading 变量。因此它立即设置为 false。您应该将其移动到 timeout 回调中。

initialize() {
      //you do not need to call the set method; since you are setting a primitive data type; reactivity is detected
      //this.$set(this, "dataLoading", true);
      this.dataLoading = true
      let vm = this;
      setTimeout(() => {
        vm.items = [
          { name: "Art", position: "Manager" },
          { name: "David", position: "Salesman" },
        ];
        // reset the dataLoading only after the data has been loaded.
        vm.dataLoading = false
      }, 1000);
      // this line of code does not wait for the setTimeout to finish. This line of code was resetting your variable without waiting for the timeout to complete; thus you never saw the data loading indicator
      //this.$set(this, "dataLoading", false);
}