handle vue-js dropdown plugin in selenium webdriver - selenium

Question

I am testing a web application which has v-select vuejs dropdown plugin for Country field. How Can I select values in dropdown using selenium webdriver.
It has no select/div.
Below is the HTML before selecting the country from the dropwdown
<div data-v-ce984332="" id="country-fg" class="mg-t-20">
<p data-v-ce984332="" class="control has-icon has-icon-right">
<div data-v-ce984332="" dir="auto" class="dropdown v-select single searchable" name="country" aria-required="true" aria-invalid="false">
<div class="dropdown-toggle clearfix">
<input type="search" autocomplete="false" placeholder="Country" aria-label="Search for option" class="form-control" style="width: 100%;"> <button type="button" title="Clear selection" class="clear"><span aria-hidden="true">×</span></button> <i role="presentation" class="open-indicator"></i>
<div class="spinner" style="display: none;">Loading...</div>
</div>
<!---->
</div>
<span data-v-ce984332="" class="small tx-warning" style="display: none;"></span></p>
</div>
And this is the HTML after selecting the country as United States from the dropdown
<div data-v-ce984332="" id="country-fg" class="mg-t-20">
<p data-v-ce984332="" class="control has-icon has-icon-right">
<div data-v-ce984332="" dir="auto" class="dropdown v-select single searchable" name="country" aria-required="true" aria-invalid="true">
<div class="dropdown-toggle clearfix">
<span class="selected-tag">
United States
<!---->
</span>
<input type="search" autocomplete="false" aria-label="Search for option" class="form-control" style="width: auto;"> <button type="button" title="Clear selection" class="clear"><span aria-hidden="true">×</span></button> <i role="presentation" class="open-indicator"></i>
<div class="spinner" style="display: none;">Loading...</div>
</div>
<!---->
</div>
<span data-v-ce984332="" class="small tx-warning" style="display: none;"></span></p>
</div>

Answer 1

Please specify the language binding you are using and the things you've tried so far.
Algo in Java:
click the 'dropdown' field: driver.findElement(By.name("country")).click()
click the option: driver.findElement(By.name("country-1")).click()
These kinds of 'dropdown' fields are usually tied to another div / element.
E.g., when you click the 'dropdown' field (item 1), another dynamic div may appear containing the options in some form of tag.
Most common examples would be, <li>, <div>, <span>. You'll then have to do another click() on the option you want. (item 2)
There are even cases where the dropdown div encloses an input tag to which you can do sendKeys() or setAttribute() as well as cases where you can do a javascript click directly into one of the options.
Suggest you provide more info so we can help you better.
selenium language bindings
html snippet of the dropdown - please avoid using screenshots for snippets
html element of the options that appear when you click the dropdown