hesamurai/nested-sort

Framework compatibility

Opened this issue · 1 comments

Thank you to the author. It has helped me solve a big problem. What should I do if I want to use it in conjunction with Vue3

Thank you to the author. It has helped me solve a big problem. What should I do if I want to use it in conjunction with Vue3

I'm glad you've found it useful @1750911700! The documentation website is built with NuxtJS which is a framework on top of VueJS. You can use it like this:

<script>
import NestedSort from 'nested-sort'

export default {
  data: () => ({
    items: [
      { id: '1', text: 'Topic 1' },
      { id: '2', text: 'Topic 2' },
      { id: '3', text: 'Topic 3' },
      { id: '31', text: 'Topic 3-1', parent: '3' },
      { id: '4', text: 'Topic 4' }
    ],
    nestingLevels: -1,
    ns: null,
    shouldInit: true
  }),
  mounted() {
    this.initNestedSort()
  },
  methods: {
    initNestedSort() {
      this.ns = new NestedSort({
        actions: {
          onDrop: (data) => {
            console.log(data)
          }
        },
        el: '#draggable', // this needs to exist in the template
        data: this.items,
        droppingEdge: 5,
        init: this.shouldInit,
        nestingLevels: this.nestingLevels
      })
    },
  }
}
</script>

I will add this as a sample to the repo at first chance.