Invalid prop: custom validator check failed for prop "country".

[JamesAngier]

<country-flag :country="item.value" size="small"/>

I have tried item.value in Alpha3 and Alpha 2 with the same issues e.g. item.value = 'AU' item.value = 'AUS'

However it works without being binded to item

<country-flag country="AU" size="small"/>

[JamesAngier]

@P3trur0 Are you able to replicate this?

[ubaldop]

Hello @JamesAngier, do you mean something like this?

<script>
import Vue from 'vue';
import CountryFlag from '@/CountryFlag.vue';

export default Vue.extend({
  name: 'ServeDev',
  components: {
    CountryFlag
  },
  data() {
    return {
     items: {value: 'it'}
    };
  },
});
</script>

<template>
  <div id="app">
    <CountryFlag :country='items.value'/>
  </div>
</template>

If so, it's not complaining on my Chromium installation. Could you please provide more information about your current configuration?

[JamesAngier]

Hey @P3trur0, here is my component. The flag shows correctly, i just get the Vue warning in the console.

An example of what countriesFormatted is returning is the following: {value: "NZ", text: "New Zealand"} {value: "AU", text: "Australia"}

And the error in the chrome console is the following: [Vue warn]: Invalid prop: custom validator check failed for prop "country".

My guess is that it is related to using a v-slot. Like I said, it works and shows the flags correctly, just throwing unnecessary warnings :)

<script>
import countries from 'i18n-iso-countries'
import Vue from 'vue';
import CountryFlag from 'vue-country-flag'
    
export default {
    name: 'SearchFilter',
    data () {
      return {
        defaultCountry: {
          value: '',
          text: 'All'
        },
        defaultState: {
          value: '',
          text: ''
        }
      }
    },
    computed: {
      countriesFormatted () {
        countries.registerLocale(require('i18n-iso-countries/langs/en.json'))
        const countryList = this.countryRaces.map((c) => ({
          value: countries.alpha3ToAlpha2(`${c.country}`),
          text: countries.getName(`${c.country}`, 'en')
        }))
        const b = {
          value: '',
          text: 'All'
        }
        countryList.unshift(b)
        return [...new Set(countryList)]
      }
   }
}
</script>

<template>
  <v-select
    dense
    hide-details
    outlined
    v-model="defaultCountry"
    :items="countriesFormatted"
    label="Country"
    @change="defaultState = null"
    @input="(country) => setCountryOf(country)">
    <template v-slot:item="{ item }">
      <span style="margin-right: 5px; margin-top: 3px">
        <country-flag :country="item.value" size="small"/>
      </span>
      <span>{{ item.text }}</span>
    </template>
  </v-select>
</template>