Vuetify 自动完成组件：设置值答案

【问题标题】：Vuetify autocomplete component: set valueVuetify 自动完成组件：设置值
【发布时间】：2019-08-19 08:04:59
【问题描述】：

我们使用 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>

【问题讨论】：

那里有同样的问题，但不能使用我使用 v-combobox 解决的“return-object”参数

标签： javascript vue.js vuetify.js

【解决方案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 参数添加到自动完成标记中。

【讨论】：

【解决方案2】：

正如您在此 sn-p 中看到的，您必须确保在渲染组件之前创建属性 mcc。它应该在控制台中抛出一个错误，告诉你 mcc 是未定义的

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
          <v-autocomplete
            v-model="model.mcc"
            :items="items"
            color="white"
            hide-no-data
            hide-selected
            item-text="description"
            item-value="id"
            placeholder="MCC Code"
          />
        </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: () => ({
        model: {mcc: {description: ''}},
        items: [{id:0, description: 'test 1'}, {id:1, description: 'test 2'}]
      })
    })
  </script>
</body>
</html>

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

以下 sn-p 对我有用：

  <v-autocomplete
    [...]
    :filter="filter"
    :return-object="true"  
  >
    <template slot="selection" slot-scope="data">
      {{ data.item.description}}
    </template>
    <template slot="item" slot-scope="data">
      <div>{{ data.item.description}}</div>
    </template>
  </v-autocomplete>

并添加以下脚本：


methods: {
  filter (item, queryText, itemText) {
    if (queryText != null && item != null && item.description) {
      return item.description.toLocaleLowerCase().indexOf(queryText.toLocaleLowerCase()) > -1
    }
    return -1
  }
}

【讨论】：