Vuetify 自动完成组件：设置值

Question

我们使用 vuetify 自动完成组件 https://vuetifyjs.com/ru/components/autocompletes 来显示键/值对。

当我打开页面以创建新实体时，一切正常，但是当我打开页面以修改必须使用保存的值填写字段的实体时，自动完成字段不显示值。这是实体模型的示例： {name : "name", legalId : "123", mcc : {id : "1", description : "text"}} 。项目变量具有格式 [{id : "1", description : "text"}, {id : "2", description : "text"}]

那么如何显示 model.mcc.description 中的“描述”属性值呢？

 <template>
  <div>
    <v-form class="mt-5">
      <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
      ></v-text-field>

      <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
      ></v-text-field>

      <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"

      ></v-autocomplete>

    </v-form>
  </div>
</template>

<script>
import axios from 'axios';
import queries from '../../utils/queries';

export default {
  name: 'MPayMerchantEditor',

  props: ['merchant', 'loading', 'showCancel'],

  components: {},

  data: () => ({
    model: {},
    isLoading: false,
    items: [],
    searchMccCodes: null,
    required: true,
  }),

  computed: {
    isFormValid() {
      return !Object.keys(this.fields)
        .some(key => this.fields[key].invalid);
    },
    isNew() {
      return !this.merchant;
    },
  },

  methods: {
    submit() {
      this.$validator.validateAll()
        .then((isValid) => {
          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) => {
            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) => {
          this.items = response.data;
          this.isLoading = false;
        })
        .catch((e) => {
          this.showError(e);
          this.isLoading = false;
        });
    },
  },

};
</script>

原文由 Cayman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要使用“选择”作用域插槽。

 <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"
  return-object
>
  <template slot="selection" slot-scope="data">
    {{ data.item.description }}
  </template>
</v-autocomplete>

您可能应该将 return-object 参数添加到自动完成标记中。

原文由 Jon Teeter 发布，翻译遵循 CC BY-SA 4.0 许可协议