How to get name in change event from Multiselect Dropdown?

[Erwin]

Hi Syncfusion support,

I'm trying the following sample:

<template>

<ejs-multiselect id='multiselect' :dataSource='sportsData' :fields='fields' popupHeight="250px" popupWidth="250px" placeholder="Find a game" :change="MultiselectChange"></ejs-multiselect>

</template>

<script>

.

.

.

data: function () {

          return {

              sportsData: [

                  { Id: 'game1', Game: 'Badminton' },

                  { Id: 'game2', Game: 'Football' },

                  { Id: 'game3', Game: 'Tennis' }

              ],

              fields: { text: 'Game', value: 'Id' },

          };

        },

      methods: {

        MultiselectChange: function(args) {

          debugger;

        },

      },

.

.

.

</script>

In the MultiselectChange method, I can't seem to get the Game text, only able to find the Game Id. So is there anyway to get the text value from the parameter of onChange event of Multiselect Dropdown?

[Berly Christopher]

Hi Erwin, 

  

Greetings from Syncfusion support. 

  

We can get the name in the selected event argument as mentioned in the below code example. 

  

  <ejs-multiselect id='multiselect' :dataSource='sportsData' :fields='fields' popupHeight="250px" popupWidth="250px" placeholder="Find a game" :select="MultiselectChange"></ejs-multiselect> 

 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiSelect_select479103028  

  

Screenshot: 

  

 

  

Regards, 

Berly B.C 

[Erwin]

Hi Berly,

Thanks for the reply. This is what I get from my end

Some additional details:
- I'm using Vue 3, from your screenshot I assume you're using Vue 2
- I'm using syncfusion/ej2-vue-dropdowns version 19.3.56

Do you mind test it using Vue 3? Sorry for the hassle. Thanks in advance.

Regards,
Erwin

[Berly Christopher]

Hi Erwin, 

  

You have defined the change event for the MultiSelect component. As we mentioned earlier, you can get the item details from the select event  as mentioned in the below code example. 

  

<ejs-multiselect id='multiselect' :dataSource='sportsData' :fields='fields' popupHeight="250px" popupWidth="250px" placeholder="Find a game" :select="MultiselectChange"></ejs-multiselect>  

 

  

API Link: https://ej2.syncfusion.com/vue/documentation/api/multi-select#select  

  

Regards, 

Berly B.C 

[Erwin]

Ah ok sorry for not paying attention. I will definitely try it out! Thanks for the help.

Regards,
Erwin

[Berly Christopher]

Hi Erwin, 

  

We will wait until hear from you. 

  

Regards, 

Berly B.C 

[Erwin]

Hi sorry for the late reply, it works with the select event, thanks for the help!

[Berly Christopher]

Hi Erwin, 

  

We are glad to know that the issue is resolved in your end. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C