【解決方法】ツリー階層テーブルで正しい方向に向かっていますか?

プログラミングQA

2023.01.17

Vue.js でツリー階層テーブルを作成しようとしています。私は Vue.js の初心者で、知識を深めたいと思っていました。しかし、私はそれを正しく行っているかどうかを知りたいです。オブジェクトがフィールドにあるかどうか、またはその Children フィールドが空であるかどうかを確認して、問題を解決する必要があるかどうかわかりません。それとも、解決策を間違った方法で進めていますか?

私が試したこと：

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);
    }
    
},
  }
});