In the context of my child and parent components, I have a boolean prop in the child component with a default value of false. When calling the child component within the parent component and setting it based on a computed function that returns a boolean value, an error occurs. child component
<template>
<div v-if="fruitDisplay">
<span >{{ fruitName }}</span>
</div>
</template>
<script>
export default {
name: "childComponent",
props: {
fruitDisplay: {
type: Boolean,
default: false
}
},
data() {
return {
fruitName: 'fruit selected !!!!'
}
}
}
</script>
<style scoped>
</style>
parent component
<template>
<div id="selector">
<div v-model="selected" v-for="(item, key) in fruitList" :value="key">
<child-component :fruitDisplay='getCoconut(item)'></child-component>
</div>
</div>
<br>
<br>
<span>Selected: {{ selected }}</span>
</div>
</template>
<script>
export default {
name: "ParentComponent",
data() {
return {
selected: '',
fruitList: {
"fruit1": "Apple",
"fruit2": "Banana",
"fruit3": "Coconut"
}
}
},
computed: {
getCoconut(item) {
return item === 'Coconut'
}
}
}
</script>
<style scoped>
</style>
I encountered the following error: TypeError: _vm.getCoconut is not a function in the browser console, and my page fails to display. The issue lies here:
<child-component :fruitDisplay='getCoconut(item)'></child-component>
How should I go about resolving this?