Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Autocomplete question

EXPERTiCO free asked 2 years ago


Hi. I want to use autocomplete component in MDB 5 Vue But I have a questions:

How to handle selected item?

<MDBAutocomplete
  v-model="cityAutocompleteAsync"
  :filter="cityAutocompleteFilterAsync"
  :displayValue="cityAutocompleteDisplayValueAsync"
  style="width: 22rem"
  :label="$t('dictionary.city')"
  @itemSelect="cityAutocompleteSelect(e)"
  @clear="cityAutocompleteClear"
  clearButton
/>

cityAutocompleteSelect:function(e){
      alert(e);
  },

But alert shows me undefined

How to set default selected value?

How to add clear button and handle clear event?


Mikołaj Smoleński staff commented 2 years ago

I suggest to watch cityAutcompleteSync value changes, because it observe item selecting. Here's the snippet example: https://mdbootstrap.com/snippets/vue/mikolaj-smolenski/3721065

Keep coding,  Mikołaj from MDB


EXPERTiCO free commented 2 years ago

@Mikołaj Smoleński thank you. But it is not that I mean. I want to get whole selected object. City object is {id:1, name:'City name'}. I want to get id of selected object


EXPERTiCO free answered 2 years ago


I just rewrote this component for me. Added validation and property for selected objectIf needed, please use my approach

* Removed content *


Mikołaj Smoleński staff commented 2 years ago

Thank you for posting your solution, but it's a pro component and we can't leave the code here.

Keep coding,  Mikołaj from MDB


EXPERTiCO free commented 2 years ago

sorry about that



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: MDB5 1.9.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No