[Vuejs]-Nested v-for loops and incorrect data placement

by

1👍

✅

You could sort the text-heading nodes as follows:

  1. flatten nodes – ungroups all nodes so that they’re all at the same depth, which facilitates sorting
  2. sort nodes – sorts the nodes by type and heading number
  3. group nodes – given a sorted list, groups together nodes under the appropriate heading

Then, use a computed property (e.g., named "egSorted") to return the input (eg) sorted:

import { sortNodes } from './tree.js';

export default {
  data() {
    return {
      eg: [...]
    };
  },
  computed: {
    egSorted() {
      return sortNodes(this.eg);
    }
  }
}

And in your template, replace eg with egSorted.

demo

Leave a comment