I have a basic component with the following structure:
<template>
<span @click="clickHandler" :class="className"></span>
</template>
<script>
export default {
name: "PlusIconComponent",
props: {
gender: {
type: String,
required: true
},
part: {
type: String,
required: true
},
opened: {
type: Boolean,
required: true
}
},
data(){
return {}
},
methods: {
clickHandler(){
console.log('clicked', this.part)
}
},
computed: {
className(){
let classes = ['plus-icon', this.part, this.gender]
if(this.opened){
classes.push('opened')
}
return classes.join(' ')
}
}
}
</script>
This particular component is nested within a root component that dynamically displays different child components based on certain conditions. One of these child components includes the PlusIconComponent but the click handler does not seem to be functioning as expected. Interestingly, moving the event handling up one level in the components hierarchy also does not solve the issue.
The behavior is odd considering that I have successfully used events in child components previously.
Furthermore, this component is being rendered in a loop like so:
<PlusIconComponent :key="part" v-for="part in parts" :part="part" :gender="gender" :opened="(showPart===part)" />
I have also tried using the @click.native modifier for the component, but unfortunately, it did not produce the desired result. Any insights or suggestions would be greatly appreciated. Thank you.