title: Vuetify autocomplete component: set value
body: <p>We use vuetify autocomplete component <a href="https://vuetifyjs.com/ru/components/autocompletes" rel="nofollow noreferrer">https://vuetifyjs.com/ru/components/autocompletes</a> to display key/value pairs. </p>
  
  <p>When I open page to create new entity all works fine but when when I open page to modify entity where fields must be filled in with saved values then autocomplete field does not display value. 
  Here is the example of entity model: 
  <code>{name : "name", legalId : "123", mcc : {id : "1", description : "text"}}</code>. Items variable has format 
  <code>[{id : "1", description : "text"}, {id : "2", description : "text"}]</code></p>
  
  <p>So how it is possible to display "description" property value from <code>model.mcc.description</code>?</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;v-form class="mt-5"&gt;
        &lt;v-text-field
          v-validate="'required|max:255'"
          v-model="model.name"
          :error-messages="errors.collect('name')"
          :class="inputClass('name')"
          label="Name"
          data-vv-name="name"
          required
        &gt;&lt;/v-text-field&gt;
  
        &lt;v-text-field
          v-validate="'required|max:255'"
          v-model="model.legalId"
          :error-messages="errors.collect('legalId')"
          :class="inputClass('legalId')"
          label="Legal ID"
          data-vv-name="legalId"
          required
        &gt;&lt;/v-text-field&gt;
  
        &lt;v-autocomplete
          v-model="model.mcc"
  
          :items="items"
          :loading="isLoading"
          :search-input.sync="searchMccCodes"
          :class="inputClass('mccCode')"
          color="white"
          hide-no-data
          hide-selected
          item-text="description"
          item-value="id"
          label=""
          placeholder="MCC Code"
  
        &gt;&lt;/v-autocomplete&gt;
  
      &lt;/v-form&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios';
  import queries from '../../utils/queries';
  
  export default {
    name: 'MPayMerchantEditor',
  
    props: ['merchant', 'loading', 'showCancel'],
  
    components: {},
  
    data: () =&gt; ({
      model: {},
      isLoading: false,
      items: [],
      searchMccCodes: null,
      required: true,
    }),
  
    computed: {
      isFormValid() {
        return !Object.keys(this.fields)
          .some(key =&gt; this.fields[key].invalid);
      },
      isNew() {
        return !this.merchant;
      },
    },
  
    methods: {
      submit() {
        this.$validator.validateAll()
          .then((isValid) =&gt; {
            if (isValid) {
              this.$validator.reset();
              this.$emit('submit', this.model);
            } else {
              this.showValidationErrorMessage();
            }
          });
      },
      cancel() {
        this.$validator.reset();
        this.$emit('cancel', this.model);
      },
      inputClass(name) {
        if (this.fields[name]) {
          const changed = this.fields[name].changed;
          return { 'merchants-editor__input__not-changed': !changed };
        }
        return {};
      },
      storeMerchant() {
        if (this.merchant) {
          Object.keys(this.merchant)
            .forEach((key) =&gt; {
              this.model[key] = this.merchant[key];
            });
            this.items.push(this.model.mcc);
          this.$validator.reset();
        }
      },
    },
  
    mounted() {
      this.storeMerchant();
    },
  
    created() {
      merchant);
    },
  
    watch: {
      merchant() {
        this.storeMerchant();
      },
      searchMccCodes(value) {
        if (!value) {
          return;
        }
        this.isLoading = true;
        axios.get(queries.merchantMccCodes(value))
          .then((response) =&gt; {
            this.items = response.data;
            this.isLoading = false;
          })
          .catch((e) =&gt; {
            this.showError(e);
            this.isLoading = false;
          });
      },
    },
  
  };
  &lt;/script&gt;
  </code></pre>