Topic: Chip handle-close get value
Gary Woodfine pro asked 5 years ago
I am using Chip to display some data, which some data is retrieved from the database.What I would like to do if the user clicks on the X is to retrieve the value of the item they have clicked so I get the value of item removed
<mdb-chip v-for="language in profile.languages"
v-bind:key="language"
color="green lighten-2" text="white" close :handle-close="remove"
>{{ language }}</mdb-chip>
I have created a move method to be called on the handle-close which executed but I don't know how to get the value? is this possible ?
Although I provide remove method, there does not seem to be any argument or mechanism I can use to detect which item has been removed from the array?
Am I using feature correctly or have I incorrectly assumed what the functionality it would provide?
remove(event) {
console.log(event);
},
Mikołaj Smoleński staff answered 5 years ago
Unfortunately You can't handle close event in Chip component.
Best regards
Gary Woodfine pro commented 5 years ago
How do you handle updating the store with any changes to chips then?
What is the :handle-close
method used for ?
API documentation seems a little sparse on this?
Mikołaj Smoleński staff commented 5 years ago
You're right. There is handle-close which emits closeChip
event. Please add @closeChip="customFunction" to your component and it should work.
Best regards
Gary Woodfine pro commented 5 years ago
Thank you! That is exactly what I was looking for!
Please ensure you update the Documentation to detail this. I wasted a whole day yesterday searching for this. trying all manner of work arounds.
I'm positive this will be functionality other devs will be searching for.
Mikołaj Smoleński staff commented 5 years ago
Thanks for your remarks. We'll update it with the next release.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.0.0
- Device: laptop
- Browser: chrome
- OS: linnux
- Provided sample code: No
- Provided link: No