如何将对象数组传递给材质vue自动完成答案

【问题标题】：How to pass array of objects to material vue autocomplete如何将对象数组传递给材质vue自动完成
【发布时间】：2019-03-31 08:00:28
【问题描述】：

背景

我正在将一组对象传递给材料自动完成功能，可以在here 中找到它。

当我第一次在列表中选择一个项目时，它会引发错误，然后如果我再次单击该项目，它会按预期选择它。每次单击自动完成中的项目时，都会重复相同的过程。

示例错误

[Vue 警告]：“输入”的事件处理程序出错：“TypeError：不能读取未定义的属性“构造函数”

示例代码

<template>
<md-autocomplete 
  v-model="customer"
  :md-options="customers" 
  @md-changed="getCustomers" 
  @md-opened="getCustomers"
  @md-selected="getSelected" 
>
</md-autocomplete>
</template>

<script>
data: () => ({
    customers: [],
    customer: "", // I also tried making this a {}
 }),
methods: {
getCustomers(searchTerm) {
  this.customers = new Promise(resolve => {
    if (!searchTerm) {
      resolve(this.GET_CUSTOMERS);
    } else {
      const term = searchTerm.toLowerCase();
      this.customers = this.GET_CUSTOMERS.filter(({ email }) => {
      email.toLowerCase().includes(term);
  });
    resolve(this.customers);
  }
  });
},


getSelected() {
     console.log(this.customer);
   },
}
</script>

数据示例

GET_CUSOTMERS: [
  { client_id: 1, email: "example@example.com" },
  { client_id: 2, email: "example@example.com" }
];

问题

这个错误是什么意思，我该如何解决？我读过几年前通过这个错误从材料中使用自动完成的角度存在一个错误，但我乐观地认为这目前是可修复的，而不是材料 vue 的错误。

【问题讨论】：

您是否尝试将客户数组填充到安装的挂钩中？
我没有，我试试看。
我试过了，它仍然给我同样的问题。

标签： javascript vue.js vuejs2 vue-material

【解决方案1】：

排除错误

根据MdAutocomplete 的input-handler 源代码，在您的情况下searchTerm 是undefined（因此访问constructor 的undefined 的错误）：

// MdAutocomplete.vue: onInput()
if (this.searchTerm.constructor.toString().match(/function (\w*)/)[1].toLowerCase() !== 'inputevent') {
         ^^^^^^^^^^

而searchTerm 通常是equal to its value prop：

data () {
  return {
    searchTerm: this.value,
    //...
  }
},
watch: {
  value (val) {
    this.searchTerm = val
  },
  //...
},

...除非项目是selected:

selectItem (item, $event) {
  const content = $event.target.textContent.trim()
  this.searchTerm = content
  //...
}

因此，当错误发生时，MdAutocomplete 的 value 很可能是 undefined（来自您的 v-model），导致 searchTerm 也成为 undefined。当你选择一个项目时，searchTerm被重置为选择的文本内容，不会出现错误。

我无法使用 OP 中的代码 sn-p 重现这些确切症状，但出现看似无关的错误：demo。也许这个问题缺少重现问题的重要细节。

对 md-autocomplete 选项使用对象数组

md-options（即此处的this.customers）承诺必须返回字符串数组，因此您必须将对象数组转换为预期格式（使用Array.prototype.map）：

this.customers = new Promise(resolve => {
  if (!searchTerm) {
    resolve(GET_CUSTOMERS.map(x => x.email));   // <-- map to `email` property
  } else {
    const term = searchTerm.toLowerCase();
    this.customers = GET_CUSTOMERS.filter(/*...*/).map(x => x.email);   // <-- map to `email` property
    resolve(this.customers);
  }
}

Array.prototype.filter 回调必须返回一个布尔值才能进行任何过滤。以下arrow function，用作回调，不返回任何内容：

GET_CUSTOMERS.filter(({ email }) => {
  email.toLowerCase().includes(term);
});

您可以删除箭头函数的括号：

GET_CUSTOMERS.filter(({ email }) => email.toLowerCase().includes(term));

或使用return 声明：

GET_CUSTOMERS.filter(({ email }) => {
  return email.toLowerCase().includes(term);
});

demo (fixed)

【讨论】：