vue.js: Tree View with components

Is it possible to add a tree like here with components?
I have a structure with organisations, organisation units and section. I want to show them organised.

It temporary looks like this:

One input-group example:

<b-input-group prepend="Org">
<b-form-input v-model="org.name"></b-form-input>
<b-input-group-append>
<b-btn variant="outline-danger">Delete</b-btn>
<b-btn v-on:click="editOrg(org.id, org.name)" variant="outline-success">Save</b-btn>
</b-input-group-append>
</b-input-group>


1 Answer
1

Yes it is possible, I recently created a drag and drop menu builder using recursive components. Here is a good tutorial that can walk you through how to handle that part: https://alligator.io/vuejs/recursive-components/

Once you have an understanding of how recursive components work you should be able to build your array and nest any content you want, i.e. <input> elements inside of your list. Then just reference the input by a key, to bind the input to the item in your array.

<input>

@click

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.