While working on my website, I found myself using buttons and dropdowns frequently. To streamline this process, I decided to create a custom component called BlueButton.vue for specific features. This way, I can avoid redundant styling declarations. Here's an example of the BlueButton component:
<template>
<v-btn dark color="blue" class="blue-btn">
<slot>
<!-- -->
</slot>
</v-btn>
</template>
Now, I'm attempting to implement this custom component within another form component named TheForm.vue:
<template>
<blue-button @click="showTheDialog = false" v-if="thebutton(btn)">Cancel</blue-button>
</template>
<script>
import BlueButton from '../components/BlueButton'
export default {
props: {
//
},
components: {
'blue-button' : BlueButton
},
</script>
However, even though the button in TheForm.vue appears correctly styled, the events such as @click and v-if seem to not be functioning (i.e. clicking the button doesn't trigger any action - there are no error messages either).
How can I troubleshoot this issue to ensure that props and events operate as intended?