option change img src

[Can-Kar]

Hello !

I am trying to implement a country code select field with some customization. I need to use country flag icons with using fetched data's country abbr. code.

I am able to change the img src based upon selected country's abbr. code with cumputed function using selected model but i also need to add flag icon of the relevant ountry on the select menu. I am kind of new to Vue. So if anyone can help me it would be great. Have a nice day !

          <vSelect
              class="w-100 py-3"
              v-model="selected"
              label="name"
              :options="countries"
              :components="{ Deselect }"
            >
              <template #option="country">
                <span class="symbol symbol-20px me-2">
                  <img class="rounded-circle" src="media/flags_alt/tr.svg" />
                </span>

                {{ country.name }} {{ country.country_code }}
              </template>

              <template #selected-option="{ country_code }">
                <div
                  class="menu-link d-flex align-items-center justify-content-center px-1"
                >
                  <span class="symbol symbol-20px me-2">
                    <img class="rounded-circle" :src="selectedCountryFlag" />
                  </span>
                  <span class="fw-bold">{{ country_code }}</span>
                </div>
              </template>
            </vSelect>

[Can-Kar]

<img class="rounded-circle" v-bind:src=" 'media/flags_alt/' + country.country_abbreviation.toLowerCase() + '.svg' "/>

Solved my problem.