After spending some time searching on Google, I am still struggling to find a solution for this issue.
I have a list of "Intents" that contain nested lists of "Entities" created using v-for loops.
The Intents are already computed, but now I need to dynamically sort the "Entities" list as well. To achieve this, I decided to make that list also computed.
Error :
**TypeError: _vm.entityList is not a function**
Here is my current approach :
< script >
import uniq from 'lodash/uniq'
import orderby from 'lodash/orderby'
import Util from "@/components/util.js"
export default {
data() {
return {
// ....
}
},
computed: {
nluData() {
return orderby(this.$store.getters.nlujson.filter(item => {
return item.intent.toLowerCase() === this.selectedIntent
}), ['intent', 'text'], ['asc', 'asc'])
},
entityList(item) {
return orderby(item.entities, ['entity', 'value'], ['asc', 'asc'])
},
},
created() {
this.$store.dispatch('getNluJson')
},
methods {
// ......
}
</script>// parent structure
<div v-for="(item, key, index) in nluData">
// displaying nluData content through item.mydata // child structure
<div v-for="ent in entityList(item)">
// displaying entities data through computed prop. // item.entities is the array
</div>
</div>
{
"id": "J4a9dGEBFtvEmO3Beq31",
"text": "This is Intent 1",
"intent": "shelf_life",
"entities": [
{
"start": "33",
"end": "44",
"value": "fridge",
"entity": "ingredient_placement"
},
{
"start": "10",
"end": "20",
"value": "duration",
"entity": "shelf_life"
},
{
"start": "25",
"end": "30",
"value": "spareribs",
"entity": "ingredient"
}
]
},