用函数中的数据填充 vuetify 组合框答案

【问题标题】：Fill vuetify combobox with data from function用函数中的数据填充 vuetify 组合框
【发布时间】：2020-10-16 09:29:21
【问题描述】：

我有一个 Vuetiy 组合框，它是用户可以通过电子邮件搜索 voor 数据并返回一个对象（访问者）的表单的一部分：

 <EmailInput
   v-model="selectedVisitor"
   :required="true"
   :autocomplete="true"
   :items="visitors"
  />

<template>
  <div>
    <v-text-field
    v-if="!autocomplete"
      :rules="[
        (v) => !!v || $t('error.emailRequired'),
        (v) => /.+@.+\..+/.test(v) || $t('error.emailInvalid'),
      ]"
      outlined
      :label="label"
      required
      @input="$emit('input', $event)"
    />

    <v-combobox
      v-if="autocomplete"
      :rules="[
        (v) => !!v || $t('error.emailRequired'),
      ]"
      :label="label"
      outlined
      append-icon="arrow_drop_down"
      :items="items"
      item-text="email"
      item-value="email"
      @input="$emit('input', $event)"
    >
      <template v-slot:selection="data">
        {{ data.item.email || data.item }}
      </template>
      <template v-slot:item="data">
        {{ data.item.name }} - {{ data.item.email }}
      </template>
    </v-combobox>
  </div>
</template>

<script>
export default {
  props: {
    required: Boolean,
    items: Array,
    autocomplete: Boolean,
  },
  computed: {
    label() {
      if (this.required === true) {
        return this.$i18n.t('labels.emailReq');
      }
      return this.$i18n.t('labels.email');
    },
  },
};
</script>

如果找到现有访问者，则填写其他表单字段，否则仅将电子邮件发送到 newVisitor 对象。

    selectedVisitor(val) {
      if (typeof val === 'object' && val !== null) {
        this.newAppointment.visitorId = val.id;
        this.existingVisitor = true; // we don't have to write it to the db
        Object.assign(this.newVisitor, val); // for displaying the data only, object assign because db array was edited too when data was modified or deleted
      } else if (val === null || val === '') {
        this.newAppointment.visitorId = '';
        this.newVisitor = {};
      } else {
        this.newVisitor.email = val;
      }
    },

然后用户点击一个按钮，数据被发送到multipleVisitors数组。

如果用户想要编辑数据，问题在于重新填充这些表单字段的功能：

 editVisitor(email) {
   // get the visitor that needs to be edited
   const visitorArray = this.multipleVisitors.filter((el) => el.email === email);
   const visitor = visitorArray[0];
   // set the visitor to the form
   this.newVisitor = visitor;
   // variable set to combobox
   this.selectedVisitor = visitor.email;

   // remove the visitor from the visitor array
   this.multipleVisitors = this.multipleVisitors.filter((el) => el.email !== email);
 },

除了保持为空的组合框外，表单已填写。如果我查看 vue 开发工具，分配给 v-model 的变量确实包含电子邮件地址。

我尝试将整个对象分配给selectedVisitor，但这并没有改变任何东西。

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

这可能会有所帮助

<v-combobox :items="MyFillFuntion()"></v-combobox>

<v-combobox :items="MyFillFuntion(scopeData)" # optional></v-combobox>

别忘了

<script>
export default {
 data: () => ({
   MyFillFuntion() {
     let array_i_need_to_fill = [];

     //  your process ...  ...

     // and finally
     return  array_i_need_to_fill;
   }
 }),
  props: {
    required: Boolean,
    items: Array,
    autocomplete: Boolean,
  },
  computed: {
    label() {
      if (this.required === true) {
        return this.$i18n.t('labels.emailReq');
      }
      return this.$i18n.t('labels.email');
    },
  },
};
</script>

【讨论】：