Hierarchical (mixed) Treeview from JSON

Questions
1

Not sure, if I’m doing something wrong here, but my treeview-items always show up as folder.

image

Here’s the treeview:

<f7-treeview>
  <f7-treeview-item v-for="(item, index) in jsonTree" :key="index" :label="item.title" >
      <template v-if="false">
          <f7-treeview-item v-for="(itm, idx) in item.data" :key="idx" :label="itm.title"></f7-treeview-item>
      </template>
  </f7-treeview-item>
</f7-treeview>

here’s the json:

treeview: [
    {
        "title": "document",
    },
    {
        "title": "folder #2",
        "data": [{
            "title": "Doc inside 1",
        }]
    },
    {
        "title": "title 2",
    },
],

It seems f7 detects the template as child-node and renders the content.

How can I circumvent this?

tia

andy

2

Yes, this is how Vue 3 handles children, template is still a valid children. You can overwrite default children detection by setting :toggle="false" prop on tree-view-item:

<f7-tree-view-item :toggle="false">...</f7-tree-view-item>

won’t render it as expandable item

3

OK - thanks for the clarification!