I am currently developing a Vue component library and one of the components I have built is a button that contains data for its width and left position. My goal is to emit this data to the parent (a tabs component) when the button is clicked. After troubleshooting extensively, I have identified the source of most of the issues. It seems like the child component (button) is emitting the correct data, but the parent component (tabs) is receiving the click/pointerevent object instead of the emitted data. I believe the problem lies in my parent's click handle method, but I am struggling to pinpoint the exact issue. I have provided code snippets for both components and their respective click handler methods.
Although simplified, the main objective is to emit the width (and eventually the left position) of the child button to the parent tab upon clicking the button. The emitted width/left position will be used to adjust a reactive underline slider whenever a button in the tabs is clicked. I added a console log statement to track the emitted value from the child on click as well as the received value by the parent. Currently, the child is emitting the correct value when the button is clicked, but the parent is trying to assign a PointerEvent object instead of the expected data. Any feedback would be appreciated!
Child (button) template and relevant script:
<template>
<div class="button @click="click" ref="button">
<slot />
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'Button',
emits: [
'click'
],
data () {
return {
width: '',
left: ''
}
},
setup() {
const button = ref(null)
return {
button
}
},
mounted () {
this.$nextTick(() => {
this.left = Math.ceil(this.button.getBoundingClientRect().left)
this.width = Math.ceil(this.button.getBoundingClientRect().width)
})
},
methods: {
click () {
this.$emit('click', this.width)
console.log(`${this.width} has been emitted to the tabs component`)
}
}
}
</script>
Parent (tab) template and relevant script:
<template>
<div class="tabs" @click="updateSliderWidth">
slot
</div>
<div class="slider" :style="sliderWidth">
</template>
<script>
import Button from './Button.vue'
export default {
name: 'Tabs',
components: {
Button
},
methods: {
updateSliderWidth (value) {
this.sliderWidth = value
console.log(`${value} has been received and assigned by parent`)
}
},
data () {
return {
sliderWidth: ''
}
}
}
</script>