You are currently viewing Build a Tree Browser with Vue.js

Build a Tree Browser with Vue.js



Learn how to build a tree browser component with Vue in this video.

๐Ÿฆ Cody Siebert on Twitter: https://twitter.com/CodyLSeibert
๐Ÿ–ฅ๏ธ Code: https://github.com/codyseibert/vue-tree-browser

๐Ÿ”—Check out Cody Seibert’s main channel: https://www.youtube.com/channel/UCsrVDPJBYeXItETFHG0qzyw

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 22 Comments

  1. nguyen huy

    Awesome and more project VueJS pleaseeeeeeeeeeeeeeeee ๐Ÿ™

  2. David Redmond

    Really Great video, it covers almost all the aspects of vue. Please show more Vue

  3. _ qwerty

    I have tried to write this program and compared with yours, but I found some difference, my code is @onClick="$emit('onClick', child)", it works, could you tell me why ?

  4. Mansoor Baig

    Please make video on visual basic. Like u have done on other languages

  5. Daniel

    Fantastic tutorial. Very easy to follow.

    I've got a question and a suggestion:

    Question: why emit the click event to App.vue and send the alert from App.vue? Wouldn't it be easier to fire off the alert inside the TreeBrowser component?

    Suggestion: when importing the json data in App.vue, I don't think it needs to be reactive, right? So instead of putting it inside data(), we could put this.root = root inside created() so Vue doesn't treat the json file as reactive

    Thanks for the great tutorial ๐Ÿ™‚

  6. Abhishek Kumar

    Thank u for this awesome video, can u thinking that make a whole project of MEVN stack

  7. Dongyob Lee

    I am trying to do this in react and it's a freaking nightmare lol

  8. Louw Hyman

    Im looking for a way to make a tree browser without recursive components, because it doesn't scale well with big data and its hard to use with virtual lists.

  9. Vicky fto

    i cant use v-if and v-for in the same element, how do i solve this?

  10. Bugra Ergin

    Not sure if you are still open for ideas for recording a demo but what about a hierarchy graph using VueJS. Maybe even using SVG?

  11. Pedro Araujo

    Great video.. thanks for sharing…!
    Would you mind to guide me in the way How to edit the parent or children name in line?
    I mean, If I make a double click on a parent or a child name it lets me to edit it in line.
    Thanks in advanced!

  12. DEVBEZ

    event bus can be used for emitting directly to app.vue

Leave a Reply