We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

2-way binding in DropDownList

I have the following code (see attached project) where I am trying to do 2-way binding on the DropdownList component. I am passing an array of objects of the form {id: x, text: y} to the dataSource property and the following object {text: "text", value: "id"} to the fieldOptions. 

I am using v-model="value" on the control and I was expecting if I pass value = 2 from the beginning to have my second object in the dataSource array selected in the dropdown. However this doesn't happen. I can only get a selected object if I pass the value of a text field to the 'value' variable.

What am I doing wrong? Or is this an issue in the control itself? 

Thank you in advance!

Attachment: popupsearchdropdownforked_fe1f04bc.zip

1 Reply

SP Sureshkumar P Syncfusion Team February 15, 2023 11:23 AM UTC

Hi Ana,

We suggest you update the fields property to the component rendering tag element to resolve the issue.

Find the code changes here:








Find the modified sample in the attachment:


Sureshkumar P

Attachment: popupsearchdropdownforked_fe1f04bc_1e4f9e34.zip

Live Chat Icon For mobile
Up arrow icon