vue.js - 在 vuetify 树视图中加载 vuetify 数据表

Question

我正在尝试创建具有多个子级的 Treeview。当我单击最后一个孩子时，我想运行 Axios 调用以从数据库中提取此孩子的信息并将其显示在数据表中。当然，当我点击另一个孩子时，我需要删除数据并刷新数据表，或者如果没有可用数据，则消息应该再次出现。

我已经使用 vuetify 来实现它。我不确定我是否完全理解 selected() 方法。我首先在那里进行了 AJAX 调用，但这并没有真正成功，它会将数据添加到以前的数据中。

然后我添加了 @update:active="clickOnNode" 并创建了提取数据的方法。这似乎有时有效，但并非一直有效，尤其是当我试图回到一个以前开放的孩子身上时。从服务器返回的数据是正确的，所以它必须在VUE中以及我如何处理它。我一定是做错了什么。我是否有权使用 @update:active 还是应该进入 selected() 方法？以及如何用新数据刷新数据表？

更新 它似乎部分适用于我下面的代码，但一旦我点击一个没有任何数据表数据的孩子就会失败。所以我需要的是在那时以某种方式清空并重置数据表，否则，我似乎会遇到各种 Javascript 错误，比如

观察者“pageCount”的getter错误：“TypeError：无法访问属性“slice”，this.items为空”

等等如果我在有数据的孩子之间点击，那么 @update:active="clickOnNode" 似乎加载了我的正确数据。知道我该如何解决吗？

<template>
  <v-card>
    <v-card-title class="indigo white--text headline">
      Container Overview
    </v-card-title>
    <v-row
        class="pa-4"
        justify="space-between"
    >
      <v-col cols="5">
        <v-treeview
            :active.sync="active"
            :items="allTopContainers"
            :load-children="fetchChildren"
            :open.sync="open"
            item-key="id"
            activatable
            color="warning"
            open-on-click
            transition
            @update:active="clickOnNode"
        >

          <template v-slot:prepend="{ item, active }">
            <v-icon v-if="!item.children">mdi-account</v-icon>
          </template>

        </v-treeview>
      </v-col>

      <v-divider vertical></v-divider>
      <v-col
          class="d-flex"
      >

        <v-scroll-y-transition mode="out-in">
        <div
            v-if="!selected"
            class="title grey--text text--lighten-1 font-weight-light"
            style="align-self: center;"
        >
          No Data
        </div>

        <v-card
            v-else
            :key="selected.id"
            class="pt-6"
            flat
        >

          <v-divider></v-divider>

          <v-row
              class="text-left"
              tag="v-card-text"
          >
            <v-col
                class="mr-4 mb-2"
            >
              <v-data-table
                  :headers="headers"
                  :items="containerContent"
                  :items-per-page="100"
                  class="elevation-1"
              ></v-data-table>
            </v-col>
          </v-row>
        </v-card>
        </v-scroll-y-transition>
      </v-col>
    </v-row>
  </v-card>
</template>


<script>
import 'vuetify/dist/vuetify.min.css'
export default {
  data: () => ({
    allTopContainers:[],
    active: [],
    open: [],
    containerContent: [],

    headers: [
      {
        text: 'Qty',
        align: 'start',
        sortable: false,
        value: 'qty',
      },
      { text: 'Barcode', value: 'barcode' },
      { text: 'No', value: 'no' },
      { text: 'Name', value: 'name' },
    ],
  }),


  computed: {
     items () {
       return [
         {
           name: 'Container',
           children: this.allTopContainers,
         },
       ]
     },

    selected () {

      if (!this.active.length) return undefined
      const id = this.active[0]

         /*
          .then(res => res.json())
          .then(json => (this.containerContent.push(...json)))
          .catch(err => console.warn(err))
          */
          //  return this.allTopContainers.find(allTopContainer => allTopContainer.id === id)
    },
  },

  mounted() {
    this.getZones();
  },

  methods: {

      getZones() {
        axios.get('/get-all-zones').then(response => {
          this.allTopContainers = response.data;
        });
      },

      async fetchChildren (item) {

        if(item.containerType != '1') {
          return fetch('/get-children-containers/' + item.containerType + '/' + item.id)
              .then(res => res.json())
              .then(json => (item.children.push(...json)))
              .catch(err => console.warn(err))
        }
      },

      clickOnNode(node){

          axios.get('/get-container-content/' + node)

              .then(response => {
                this.containerContent = response.data;
              
              });
             // .catch(err => console.warn(err))
      }

  } // end of methods
}
</script>

标签： vue.jsvuejs2vuetify.js