vue.js: Tree View with components

Question

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:

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>

NateShumate · Accepted Answer · 2018-08-30 17:08:40Z

2

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.

answered Aug 30, 2018 at 17:08

NateShumate

3021 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GrameJunior Over a year ago

The loading works now, but I can't get the opening/closing to work. I want to open/close it by clicking an icon on the left or the prepended text.

NateShumate Over a year ago

This gets tricky, you can use @click to pass the index and then set the toggle up as an array, then just toggle like any other component.

Collectives™ on Stack Overflow

vue.js: Tree View with components

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related