Question

这是我从https://vuetifyjs.com/en/components/treeview/#async-items摘录的代码段

<v-treeview
        :active.sync="active"
        :items="tree"
        :load-children="fetchNavigation"
        :open.sync="open"
        activatable
        color="warning"
        open-on-click
        transition
        item-key="id"
        item-text="name"
>
  <template v-slot:prepend="{ item, active }">
    <v-icon v-if="!item.children">mdi-account</v-icon>
  </template>
</v-treeview>

...

data () {
  return {
    search: '',
    active: [],
    avatar: null,
    open: [],
  }
},
methods: {
  ...mapActions(['fetchTree']),

  async fetchNavigation (item) {
    this.fetchTree();
  },

  randomAvatar () {
    this.avatar = avatars[Math.floor(Math.random() * avatars.length)]
  },
},
computed: {
  ...mapGetters(['tree', 'loadingProgress']),
  items () {
    return [
      {
        name: 'Companies',
        children: this.tree
      },
    ]
  },
  selected () {
    if (!this.active.length) return undefined
    const id = this.active[0]
    const node = this.tree.find(node => node.id === id)
    return node
  },
},
watch: {
  selected: 'randomAvatar',
}

在 treeview 文档中，我只能看到简要说明：

active 数组-可同步的道具，允许人们控制哪些节点处于活动状态。数组由每个活动项目的项目键组成。
open 数组-可同步的道具，允许人们控制打开哪些节点。数组由每个打开的项目的项目键组成。

，但在示例中，active和open属性与sync修饰符一起使用。 sync是什么意思？还有其他修饰符吗？ :open.sync="openIds"和@update:open="onOpen"

有什么区别

我还想通过单击每个公司来打开问题（并仅通过单击项目来发送检索节点内容请求），但是在初始加载时检索到的所有节点都呈现为终端节点，因此无法扩展。我该如何解决？

Vuetify树视图配置如何工作？

0 个答案: