как во 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>