Hierarchical (mixed) Treeview from JSON

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


Here’s the 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>

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?



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

OK - thanks for the clarification!