Topic: Make an Icon Clickable
Expected behavior*_Be able to click on an icon and have it set a variable to true to open a modal_*Actual behavior*_Icon is not clickable._*Resources (screenshots, code snippets etc.)
Click the link to view the image. I want the question mark to be clickable.
You can achieve this by simply adding native modifier to your click event. By default cursor over an icon element won't change to pointer so you need to add css style.
<template>
<mdb-icon @click.native="handleClick" icon="calendar-check" class="clickable-icon"/>
</template>
<script>
import { mdbIcon } from 'mdbvue';
export default {
components: {
mdbIcon
},
methods: {
handleClick() {
console.log('clicked');
}
}
};
</script>
<style scoped>
.clickable-icon {
cursor: pointer;
}
</style>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.6.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes