How to update v-model in MultiSelectDropdown to immediately when checking on/off

[Jeff Butterworth]

I have a v-model set up on a MultiSelectDropDown control. which is set up with checkboxes and the control works quite nicely. I have a Vue watch set up to the property that the v-model points to. My issue is that the watch only fires (so I assume when the v-model updates) when the control loses focus. Ideally, what I want is for the v-model property to be changed as soon as a row is checked on or off . That way I can update other parts of my UI to each checkbox change, rather than wait for the user to make all their selections and then move to another control. Am hoping there is some way of changing the update mode of the control easily.

Thanks 

Jeff

 

[Ponmani Murugaiyan]

Hi Jeff, 

Greetings from Syncfusion support. 

We suggest you to disable that changeOnBlur property of Multiselect component, it fires the change event on every value selection and remove which meets your requested requirement. 

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

<template> 

<div id="app"> 

    <div id="wrapper1"> 

          <ejs-multiselect id='first':dataSource='sportsData' mode="CheckBox" :changeOnBlur="false" :fields='fields' :placeholder="waterMark" v-model="value" ></ejs-multiselect> 

    </div> 

    <div id="wrapper2"> 

          <ejs-multiselect id='second' :dataSource='sportsData' :fields='fields' :placeholder="waterMark" v-model="value" ></ejs-multiselect> 

    </div> 

</div> 

</template> 

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

Please get back us if you need further assistance. 

Regards, 

Ponmani M 

[Jeff Butterworth]

Excellent. That works great.

I would just like to point out that this property is not listed in the vue version of the api documentation which is where I was looking:

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

It is in this version though:

https://ej2.syncfusion.com/documentation/api/multi-select/#changeonblur

Cheers

Jeff

[Ponmani Murugaiyan]

Hi Jeff, 

Thanks for the update. 

We are glad to know that the provided suggestion helps you in achieving your requirement. Yes, the changeOnBlur property is available in Vue platform also, we will include in our API documentation and refresh soon in our end.  

Regards, 

Ponmani M