Show a Default Value while also using v-model on dropdownlist component

[David Wisenbaugh]

Greetings

I have noticed that I cannot use both value and v-model at the same time, v-model will take precedence. So my question is how can I set the default value of the dropdownlistitem component with data coming from a database and have the ability to use the v-model directive

Is there a way that this can be done so I can show the default value on render and have the ability to get the selected data from the v-model

I am new to all this is why im asking ..

also how can I set the floating text on focus to blue I managed to get the line blue but Im having trouble with the text ..

looking forward to your reply .

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi David, 

Thanks for contacting Syncfusion support.

We have checked your query of binding v-model to the dropdownlist and customizing the CSS. We would like to know you that you can add predefined values to the dropdownlist using v-model property.


 

<ejs-dropdownlist 

          ref="multiselectInstance" 

          :dataSource="countries" 

          :fields="checkFields" 

          :placeholder="placeholder" 

          :floatLabelType="labelType" 

          :cssClass="bluebg" 

          v-model="selectedValue" 

></ejs-dropdownlist> 

Also to make dropdown color as blue, please add the below CSS style.


 

<style> 

 /*Floating line color*/ 

.dropdown-bg-blue.e-float-input.e-input-group:not(.e-float-icon-left) 

  .e-float-line::before, 

.dropdown-bg-blue.e-float-input.e-input-group:not(.e-float-icon-left) 

  .e-float-line::after { 

  background: blue; 

} 

/*Floating label color*/ 

.dropdown-bg-blue.e-float-input.e-control-wrapper:not(.e-error).e-input-focus 

  input 

  ~ label.e-label-top.e-float-text { 

  color: blue; 

} 

 

/*Selected item color in popup*/ 

.dropdown-bg-blue .e-dropdownbase .e-list-item.e-active { 

  color: blue; 

} 

</style 

 

Please find the sample link below.

Sample Link       : https://codesandbox.io/s/dropdown-v-model-zzc8b 

Regards, 

Jeyanth. 

[David Wisenbaugh]

Jeyanth

I am using this dropdown wrapped in a custom component and Im not gettting the v-model the usual way I do it on my components 

example- 

```

<div id="content">

        <ejs-dropdownlist 

            :id="dropdownId"

            :placeholder="placeHolder"

            v-model="inputValue"

            :dataSource="data"

            :query="query"

            :fields="fields"

            floatLabelType="Auto"

            :cssClass="className">

        </ejs-dropdownlist>

    </div>

```

this is my component setup 

I use a computed property to setup for the v-model on the component

inputValue: {

                get() {

                    return this.value

                },

                set(value) {

                    this.$emit('input', value)

                }

            }

but this is not working for this component. I have tried using select for the emit as well and still does not work..

How can I get this to work on your dropdownlist component so that I can have a default selection when coming from the database . ? 

please advise

[Berly Christopher]

Hi David, 

  

Thanks for providing more information. 

  

We have checked the DropDownList component as a normal and custom component with v-model as emit type. DropDownList is working fine and value correctly get in the emitter on value change action. So, we have prepared the sample and attached it below. 

  

Sample Link: https://codesandbox.io/s/dropdown-v-model-forked-bntyr  

  

If we misunderstood your query, please share any issue reproducing sample or modify the attached sample with the reported issue that will help us to check and proceed further at our end. 

  

Regards, 

Berly B.C 

[David Wisenbaugh]

It looks good but it needs to populate the value coming from the database  for an edit form.. that is the issue I am having it is not populating the value in the control 

[Berly Christopher]

Hi David, 

  

As we mentioned earlier, if you want to assign the pre-select value to the DropDownList component, we need to assign the required value for the v-model variable in the data return function. Please find the modified sample from the below link. 

  

Sample Link: https://codesandbox.io/s/dropdown-v-model-forked-j3t7p  

  

If we misunderstood your query, please share the exact use case requirement that will help us to check and proceed further at our end. 

  

Regards, 

Berly B.C 

[David Wisenbaugh]

Issue has been resolved

[Berly Christopher]

Hi David, 

  

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

  

Regards, 

Berly B.C