I have been experimenting with creating a 3 or 4 level cascading autocomplete feature in Vue.js, but I'm facing some issues with its functionality. You can view the original code on this CodePen link.
<div id="app">
<v-app id="inspire">
<v-card>
<v-card-text>
<v-layout wrap>
<v-flex xs3 md3>
<v-autocomplete v-model="category" :items="categories" label="Category" full-width solo hint="Random set of categories">
</v-autocomplete>
</v-flex>
<v-flex xs3 md3>
<v-autocomplete v-model="purpose" :items="purposes" label="Purpose" full-width solo hint="Based on the selected category">
</v-autocomplete>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
</v-app>
</div>
Javascript:
new Vue({
el: "#app",
data() {
return {
model: null,
product: null,
category: null,
purpose: null,
categoriesPurposes: {
"Farm Animals": ["cow", "sheep", "hen"],
Directions: ["left", "right", "up", "down"],
Time: ["past", "present", "future"],
Element: ["air", "water", "tierra", "fire"]
}
};
},
computed: {
categories() {
return Object.keys(this.categoriesPurposes);
},
purposes() {
if (!this.category) {
return null;
} else {
return this.categoriesPurposes[this.category];
}
}
}
});
I attempted to add another level of depth, but the second autocomplete field displayed object data.
To address this, I modified the data structure as follows:
categoriesPurposes: {
Asia:{
"Farm Animals": ["cow", "sheep", "hen"],
Directions: ["left", "right", "up", "down"],
Time: ["past", "present", "future"],
Element: ["air", "water", "tierra", "fire"]
}
}
However, even with this change, the data for the second autocomplete field still appears as an object.
Could you provide guidance on how to access and display the keys? Thank you.