2-way binding in DropDownList

[Ana Vasilcoiu]

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

[Sureshkumar P]

Hi Ana,

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

Find the code changes here:

<DropDownListComponent

    v-model="value"

    :dataSource="options"

    :fields='fieldOptions'

    :valueTemplate="valueTemplate"

  ></DropDownListComponent>

 

Find the modified sample in the attachment:

Regards,

Sureshkumar P

Attachment: popupsearchdropdownforked_fe1f04bc_1e4f9e34.zip