Autocomplete Vue

web
mobile

Topic: Autocomplete Vue

eladhr83 pro asked 2 months ago

Expected behavior v-model should always hold the text written on the input,

Actual behavior v-model only get updated when typing the value that is in the list

Resources (screenshots, code snippets etc.) states[] = { "United States", "Germany", ....} The user types blahblah The value in state is the previous legal field or empty if it started empty


Magdalena Dembna staff premium answered 2 months ago

Hi, The mdbAutocomplete component by default is meant to allow the user to enter only values from the provided list - so the inability to enter 'blahblah' in the country field is intentional. If on the other hand, you want to handle other values as well, use @input.native instead of v-model .

<mdb-autocomplete
  icon="heart"
   :data="states"
    label="What is your favorite US state?"
   @input.native="updateValue"
/>

updateValue(e) {
      this.autocompleteValue = e.target.value;
    },

Best regards, Magdalena


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Vue
  • MDB Version: 6.3.0
  • Device: PC
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: No