Question

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

当我打开页面以创建新实体时，一切正常，但是当我打开页面以修改实体（其中必须使用保存的值填充字段）时，自动完成字段将不显示值。这是实体模型的示例： {name : "name", legalId : "123", mcc : {id : "1", description : "text"}}。 Items变量具有格式 [{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>

Answer 1

您需要使用“选择”范围内的插槽。

<template>
    <h1>Hello world</h1>
    <p>A thing happened <Timeago datetime="${datetime}"></Timeago></p>
</template>

import Timego from './Timeago.vue'

export default {
    components: {
        Timeago
    },

    props: {
        datetime: String
    }
}

您可能应该将返回对象参数添加到自动完成标记中。

Answer 2

您是否尝试过将return-object添加到自动完成标记中？

Vuetify自动完成组件：设置值

2 个答案: