как во vue сделать список с помощью treeselect

Новичок во vue. Можете подсказать как можно из данных полученных из базы данных сделать список с помощью treeselect?введите сюда описание изображения

Пример, у меня есть список section_list. В этом списке каждый sect состоит из sect_name(название секции). Вот из этих sect_name нужно сделать список в treeselect. Буду рада любому совету

Часть с treeselect-ом:

<div>                                           
            <treeselect v-model="value" :multiple="true" >
            <treeselect-value :value="value" />
            <option v-for="sect in section_list" :key="sect.id" />                
            </treeselect>
        </div>

Сам скрипт:

<script>
import SectionService from ".../src/services/SectionService.js"
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
    name:"Statistic",

    components: { 
        Treeselect,
    },

    data() {return{
        section_list: [], 
        
        // define the default value
        value: null,
        // define options
        options: [ {
          id: 'sect',
          label: this.sect_name, #здесь как лейбл названия секции
          children: [ {
            id: 'aa',
            label: 'aa', #здесь данные подразделов внутри секции
          }, {
            id: 'ab',
            label: 'ab', #здесь данные подразделов внутри секции
          } ],
        } ],
      }
    },

    mounted(){
        this.getAllSections();
    },
  
    methods: {
        getAllSections(){
            SectionService.getAllSections().then(res => {
                console.log(">>> getAllSections", res);
                this.section_list = res.data
                console.log("list", this.section_list)
            }).catch(e => {
                console.error(">>e getAllSections", e )
            })
        },
    }

    }        
    
</script>

Ответы (0 шт):