Encountering an issue with selecting children in a tree view, here is the code snippet for my treeview:
<v-treeview
v-model="selection"
:items="questionnaires"
:selection-type="selectionType"
selectable
return-object
open-all
></v-treeview>
To populate items and their children, I utilize a computed function:
computed: {
questionnaires () {
const children = this.modules.map(module => ({
id: module.id,
name: module.MODULE_NOM,
children: this.getChildren(module.id), <-- facing an issue here
}))
return [{
id: this.formData.id,
name: this.formData.QSTAIRE_NOM,
children,
},]
},
},
When attempting to populate the children of children of a questionnaire, I encounter a stack overflow error:
getChildren(moduleId){
axios
.get(`/questionsDemo/${moduleId}`)
.then(res => {
this.questions = res.data.data || [];
})
.catch(function(err) {
console.log("Error loading questions", err);
});
const questions = []
console.log("Questions",this.questions);
for (const question of this.questions) {
console.log(question);
questions.push({
...question,
name: question.QUEST_TEXT,
})
}
return questions.sort((a,b) => {
return a.name > b.name ? 1 : -1
})
},
}
So, when trying to select the last children (questions), the following problem arises:
[Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded"
Found in
---> <VTreeviewNode>... (2 recursive calls)
<VTreeview>
<VCard>
<VApp>
<VContent>
<VApp>
<Layout> at resources/js/components/Layout.vue
<Anonymous>
<VApp>
<App> at resources/js/App.vue
<Root>
warn @ app.js:77250
logError @ app.js:78509
globalHandleError @ app.js:78504
handleError @ app.js:78464
(anonymous) @ app.js:78607
flushCallbacks @ app.js:78531
Promise.then (async)
timerFunc @ app.js:78558
nextTick @ app.js:78615
Vue.$nextTick @ app.js:80140
(anonymous) @ app.js:118006
Promise.then (async)
click @ app.js:118004
invokeWithErrorHandling @ app.js:78479
invoker @ app.js:78804
original._wrapper @ app.js:84163
app.js:78513 RangeError: Maximum call stack size exceeded
at Object.reactiveGetter [as nodes] (app.js:77655)
at VueComponent.proxyGetter [as nodes] (app.js:81243)
at VueComponent.getDescendants (app.js:117573)
at VueComponent.getDescendants (app.js:117577)
at VueComponent.getDescendants (app.js:117577)
at VueComponent.getDescendants (app.js:117577)
at VueComponent.getDescendants (app.js:117577)
at VueComponent.getDescendants (app.js:117577)
at VueComponent.getDescendants (app.js:117577)
at VueComponent.getDescendants (app.js:117577)
logError @ app.js:78513
globalHandleError @ app.js:78504
handleError @ app.js:78464
(anonymous) @ app.js:78607
flushCallbacks @ app.js:78531
Promise.then (async)
timerFunc @ app.js:78558
nextTick @ app.js:78615
Vue.$nextTick @ app.js:80140
(anonymous) @ app.js:118006
Promise.then (async)
click @ app.js:118004
invokeWithErrorHandling @ app.js:78479
invoker @ app.js:78804
original._wrapper @ app.js:84163
app.0a5fabc74150bf603a11.hot-update.js:282 les questions [{…}, __ob__: Observer]