Autocomplete Multiple default value not showing

[GoodOmen]

Hi,

Using both modelValue or v-model to show default value is not showing. Please help.

Code: Select all

<template>
  <div>
    <div>
      <AutoComplete
        multiple
        v-model="selectedCountry1"
        :suggestions="filteredCountries"
        @complete="searchCountry($event)"
        field="name"
      />
    </div>
  </div>
</template>

<script>
import CountryService from "./service/CountryService";

export default {
  data() {
    return {
      selectedCountry1: { name: "Afghanistan", code: "AF" },
    };
  },
  countryService: null,
  created() {
    this.countryService = new CountryService();
  },
  mounted() {
    this.countryService.getCountries().then((data) => (this.countries = data));
  }
};
</script>

https://codesandbox.io/s/tender-kapitsa ... .vue:0-629

[tugce.kucukoglu]

In your example 'selectedCountries' is array of the strings, but must be an array of the objects.