CODEWITHSUNDEEP
javascripthtmlvue.js
GrameJunior
GrameJunior

Reputation: 101

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:

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>

Upvotes: 0

Views: 1385

Answers (1)

NateShumate
NateShumate

Reputation: 302

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.

Upvotes: 2

Related Questions