Topic: Chip handle-close get value

Gary Woodfine pro asked 4 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 4 years ago


Unfortunately You can't handle close event in Chip component.

Best regards


Gary Woodfine pro commented 4 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 4 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 4 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 4 years ago

Thanks for your remarks. We'll update it with the next release.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: 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
Tags