Guide on sending an array of objects to Material Vue Autocomplete

Question

Guide on sending an array of objects to Material Vue Autocomplete

Context

Currently, I am dealing with a situation where I am passing an array of objects to a material autocomplete feature. The documentation for this can be found here.

However, upon selecting an item from the list for the first time, it throws an error. Strangely enough, if I click on the item again, it eventually selects it as expected. This strange behavior seems to repeat every time I interact with the autocomplete items.

Error Illustration

[Vue warn]: Error in event handler for "input": "TypeError: Cannot read property 'constructor' of undefined"

Sample Code Snippet

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

Data Example

GET_CUSOTMERS: [
  { client_id: 1, email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="73160b121e031f1633160b121e031f165d101c1e">[email protected]</a>" },
  { client_id: 2, email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="67021f060a170b0227021f060a170b024904080a">[email protected]</a>" }
];

Inquiry

I'm currently facing an error message and would like some advice on how to fix it. Does anyone know what this error indicates? I've heard about similar bugs in Angular's autocomplete feature using Material, but I believe there might be a solution specific to Vue Material. Your insights are greatly appreciated.

javascript vue.js vuejs2 vue-material

Answer 1

Answer №1

Troubleshooting the issue at hand

Upon analyzing the source code of MdAutocomplete's input-handler, it appears that in your scenario, searchTerm is undefined, leading to the error related to accessing the constructor of undefined:

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

In normal circumstances, searchTerm should be equivalent to its value prop:

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

...unless an item is selected:

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

Therefore, when encountering the error, it's probable that the value attribute of MdAutocomplete is somehow undefined (from your v-model), causing searchTerm to also become undefined. Upon selecting an item, the searchTerm resets to the text content of the selection, resolving the error.

Although I couldn't replicate those precise symptoms with the provided code snippet, unrelated errors emerged: demo. It's plausible that essential details are missing from the question for problem reproduction purposes.

Utilizing an object array for md-autocomplete options

The md-options (in this case, this.customers) promise ought to yield an array of strings, necessitating conversion of your object array into the anticipated format by employing Array.prototype.map):

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

The callback utilized for Array.prototype.filter needs to output a Boolean for filtering to take effect. The following arrow function, used as the callback, returns nothing:
```
GET_CUSTOMERS.filter(({ email }) => {
  email.toLowerCase().includes(term);
});
```
You can either eliminate the brackets within the arrow function:
```
GET_CUSTOMERS.filter(({ email }) => email.toLowerCase().includes(term));
```
or incorporate a return statement:
```
GET_CUSTOMERS.filter(({ email }) => {
  return email.toLowerCase().includes(term);
});
```

Demo showcasing the fix

Answer 2

Troubleshooting the issue at hand

Upon analyzing the source code of MdAutocomplete's input-handler, it appears that in your scenario, searchTerm is undefined, leading to the error related to accessing the constructor of undefined:

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

In normal circumstances, searchTerm should be equivalent to its value prop:

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

...unless an item is selected:

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

Therefore, when encountering the error, it's probable that the value attribute of MdAutocomplete is somehow undefined (from your v-model), causing searchTerm to also become undefined. Upon selecting an item, the searchTerm resets to the text content of the selection, resolving the error.

Although I couldn't replicate those precise symptoms with the provided code snippet, unrelated errors emerged: demo. It's plausible that essential details are missing from the question for problem reproduction purposes.

Utilizing an object array for md-autocomplete options

The md-options (in this case, this.customers) promise ought to yield an array of strings, necessitating conversion of your object array into the anticipated format by employing Array.prototype.map):

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

The callback utilized for Array.prototype.filter needs to output a Boolean for filtering to take effect. The following arrow function, used as the callback, returns nothing:
```
GET_CUSTOMERS.filter(({ email }) => {
  email.toLowerCase().includes(term);
});
```
You can either eliminate the brackets within the arrow function:
```
GET_CUSTOMERS.filter(({ email }) => email.toLowerCase().includes(term));
```
or incorporate a return statement:
```
GET_CUSTOMERS.filter(({ email }) => {
  return email.toLowerCase().includes(term);
});
```

Demo showcasing the fix

Guide on sending an array of objects to Material Vue Autocomplete

Answer №1

Troubleshooting the issue at hand

Utilizing an object array for md-autocomplete options

Similar questions

Is there a way to organize data by month using Chart Js?

Utilizing the document.createDocumentFragment() method along with innerHTML for manipulating a Document Object Model (

What could be causing my HTML5 video control buttons to not function properly when using JavaScript?

Can you explain the significance of the symbol '#' in a Vue Router URL?

Tips for accurately determining the byte count of text within a TextArea

When it comes to HTML and Javascript drawing, getting the positioning just right can be a challenge

What are some ways to implement smooth scrolling when a navigation link is clicked?

Having trouble accessing a React component class from a different component class

A Guide to Effortlessly Implementing moment.js into a React TypeScript Application

Angular ngx-translate not displaying image

Changing all object values to true with React useState

What is the best way to generate a live map with constantly updating markers?

Using AngularJS and the ng-show directive, you can set a <div> element to

Tips on connecting data within a jQuery element to a table of data

Adding elements to list items

Map does not provide zero padding for strings, whereas forEach does

The functionality to remove table rows when checkboxes are selected is not functioning as expected in an Angular 7 application

Incorporate a versatile navigation menu into your HTML pages

Utilizing Ajax for Efficiently Updating a Singular Field within a Designated Object

Ensure Angular JS includes a space or special character after applying a currency filter