How do you databind selected items in the ListBox Control?

[Don]

I have been able to successfully bind a Vue ref array to the first listbox control's data-source property successfully.  I am also able to use the toolbar controls to move items back and forth between two listbox controls.  I am not able to bind a Vue ref array for selected items on the second listbox control.  I am also unable to get the "add" and "remove events to invoke my handler functions.  Please advise on how to get the selected values that are present in the second listbox control.  In the example below, how do I get "Name 2" out of the second listbox control?

 

Thank you for your help

[Petar]

Hi, Don.

Here is a StackBlitz example demonstrating how we can get the values of the second Listbox control when working in a scenario similar to the one you described. 

In the example, you will also see how the add and remove events are working correctly for both the optional and selected Listboxes.

I hope the provided example will help you implement what you need in your application. Let me know if you have additional questions related to the current thread. 

Regards,
Petar
Progress Telerik

[Don]

Thank you so much for your timely response.  I noticed the example you provided was coded for Vue Options API.  Does the Kendo Vue Wrapper control library support Vue Composition API?  I ask because I receive the below error message when adding event handlers for Add and Remove.

[Petar]

Hi, Don.

Here is a CodeSandbox example demonstrating how the shared above ListBox implementation can be achieved using the Vue composition API.

Please check the above example and let me know if you have questions about the suggested solution.

[Don]

That's exactly what I needed.  Thank you very much.  I found my error was when I was trying to JSON.stringify() the parameter coming in on the Add/Remove events.

Thanks again.

[Petar]

Hi, Don. 

I am happy to hear that you managed to achieve what you need in your application!