Попытка установить динамический c url как backgroundImage в vuejs в v-for - PullRequest
Новая
       60

Попытка установить динамический c url как backgroundImage в vuejs в v-for

0 голосов
/ 09 июля 2020

В настоящее время пытаюсь добавить динамический c url к моему фоновому изображению внутри опции выбора. Но, похоже, ломается, не знаю, как это происходит и как это исправить. Ищу разные комбинации вроде `или 'и даже". Но очень запутались. 

 <select v-model.lazy="countryCode" @change="handleChange" class="select-field height-select-input select-width">
            <option v-for="(country, index) in checkCountryName"
              :key="index"
              :value="country.country_code"
              :selected="index === 0"
              :data-value="country.city_name"

               :style="{backgroundImage: 'url('https://www.countryflags.io/' +  {{country.country_code}} + '/flat/64.png')'}"
            >
                            
              {{ country.country_code }}
            </option>
          </select>

Ответы [ 2 ]

0 голосов
/ 09 июля 2020
0 голосов
/ 09 июля 2020

Это точный код, который вы используете? Если это так, похоже, проблема заключена в кавычки в вашем запросе URL.

У вас есть 

:style="{backgroundImage: 'url('https://www.countryflags.io/{{country.country_code}}/flat/64.png')'}"

Удалите кавычки вокруг URL-адреса, и он должен работать 

:style="{backgroundImage: 'url(https://www.countryflags.io/{{country.country_code}}/flat/64.png)'}"
...