Am I heading in the right direction with a tree hierarchical table?

Question

0.00/5 (No votes)

See more:

I'm trying to create a tree hierarchical table in Vue.js. I don't have any side task, I am a beginner in Vue.js and wanted to deepen my knowledge. But I would like to know if I am doing it right. I don't know if I should solve my problem by checking if the object is in the field or if its Children field is empty. Or am I going about the solution the wrong way?

What I have tried:

JavaScript

new Vue({ el: '#app', data() { return { data: [], childrenVisible: false } }, mounted: function () { axios.get('data/example-data.json') .then(response => { this.data = response.data.map(item => { item.childrenVisible = false; item.children.has_nemesis.records = item.children.has_nemesis.records.map(child => { child.childrenVisible = true; return child; }); return item; });

        console.log(response);
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    toggleChildren(item) {
      item.childrenVisible = !item.childrenVisible;
    },
   removeItem(item,parent) {
    if (parent) {
        const index = parent.children.has_nemesis.records.indexOf(item);
        parent.children.has_nemesis.records.splice(index, 1);
    } else {
        const index = this.data.indexOf(item);
        this.data.splice(index, 1);
    }
    
},
  }
});

Posted 16-Jan-23 9:06am

Petr Barabáš

Updated 16-Jan-23 21:57pm

Andre Oosthuizen

v5

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mohamed Elanssary · Answer 1 · 2023-01-17T03:01:00

Hello bro,

Your code appears to be using the Vue.js framework to create a tree hierarchical table. You are using axios to make a GET request to retrieve data from a JSON file, and then using the map() method to iterate over the data and add a childrenVisible property to each item in the tree. This property will be used to toggle the visibility of the item's children in the table.

You also have a toggleChildren method which allows to toggle children visibility and a removeItem method that is used to remove items from the table.

Overall, it looks like you are on the right track. However, the code may not be functional without the template and the css part, that would allow to render this data in the HTML.

It would also be helpful to include some comments in your code to explain what different parts of it are doing, especially if you plan to come back to this code later or if others are going to be working on it with you.

You also have a removeItem method, which allows to remove an item from the table. This method checks if the item has a parent, and if so, it uses the splice() method to remove it from the parent's children property. If the item does not have a parent, it is removed from the top-level data property.

It's good to see that you are using the mounted lifecycle hook to retrieve the data and that you are also handling the success and error cases when retrieving the data.

One thing you might consider is to use a computed property to filter the data based on a search term or other criteria, so that users can easily find the items they're looking for.

In general, it looks like you have a solid understanding of Vue.js and are using it effectively to create a tree hierarchical table. It would be great to see the HTML and CSS that makes up the template of your table. This would be the only missing part in order to have a full working application.

Another thing you might consider is adding a way for users to add new items to the tree. You could add a form that allows users to enter the properties for a new item, and then use a method to add the item to the appropriate location in the tree.

You might also want to consider implementing pagination or infinite scrolling if your data set is large. This would help to improve the performance of your application and make it more user-friendly.

It would also be a good idea to add some validation to your form to ensure that the data entered by users is valid. You can use built-in Vue.js directives or a library such as vee-validate to handle validation.

Overall, your code looks like a great start, but there are a few things you can add to make it more complete and user-friendly. Keep in mind that the best way to improve your skills in Vue.js is to keep practicing and experimenting with different features and libraries.

Am I heading in the right direction with a tree hierarchical table?

1 solution

Solution 1

Add your solution here

Preview 0

Am I heading in the right direction with a tree hierarchical table?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us