Topic: Autocomplete: is there a way to v-model the value
<autocomplete :data="countries" label="Your country" class="pb-3" v-model="country"/>Thanks in advance for any hints.
@Gary Woodfine I have created code snippet in which I extract only value once user select option. It is a workaround, but as I was saying, this is the default way in which input works. Since we've emitted additional events in form elements, there is no longer a need for .native - my mistake.
<template>
<mdb-container>
<mdb-row>
<mdb-col md="6" class="mx-auto">
<mdb-autocomplete
outline
icon="user-alt"
clearClass="fa-lg"
:data="states"
label="Label"
@input="onInput"
@blur="handler"
/>
</mdb-col>
</mdb-row>
</mdb-container>
</template>
<script>
import { mdbAutocomplete, mdbContainer, mdbRow, mdbCol, mdbInput, mdbTextarea, mdbBtn, mdbCard, mdbCardBody, mdbModal, mdbModalHeader, mdbModalBody, mdbModalFooter, mdbIcon } from 'mdbvue';
export default {
methods: {
onInput (val) {
if (this.selected) {
console.log(val);
this.selected = false;
}
},
handler() {
this.selected = true;
}
},
name: 'HelloWorld',
components: {
mdbAutocomplete,
mdbContainer,
mdbCol,
mdbRow,
mdbInput,
mdbTextarea,
mdbBtn,
mdbCard,
mdbCardBody,
mdbModalHeader,
mdbModalBody,
mdbModalFooter,
mdbIcon,
mdbModal
},
data() {
return {
selected: false,
states: [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illnois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Carolina",
"North Dakota",
"Ohio",
"Oklahoma",
"Oregon",
"Pennsylvania",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming"
]
};
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.font-small {
font-size: 0.8rem;
}
</style>
Gary Woodfine pro commented 5 years ago
Awesome! will check this out
Magdalena Dembna staff premium commented 5 years ago
Let me know if it solves your problem. Kind regards, Magdalena
Gary Woodfine pro commented 5 years ago
Apologies for the long delay. But unfortunately it didn't solve problem.I went for another solution instead, and didn't end up using the autocomplete.
Maybe its just me and I'll admit I probably don't know how to use it properly, but I found the autocomplete not that useful and easy to work with. It seems great to populate with options, but actually using that options is not that intuitive.
The documentation also doesn't really help, in my opinion.
Magdalena Dembna staff premium commented 5 years ago
Thank you for this feedback - we will be updating this component soon and we will try to work on its documentation to make it more user-friendly. Kind regards, Magdalena
Gary Woodfine pro commented 5 years ago
A feature that would make it easier to get the Selected Value would be great.
Gary Woodfine pro commented 5 years ago
A feature that would make it easier to get the Selected Value would be great.
Magdalena Dembna staff premium commented 5 years ago
We will take it into consideration. Kind regards, Magdalena
Hello,
v-model wont work, becouse our is not only an input, but other components too.
But we $emit for you the inputs value, so you can use it like that:
<autocomplete :data="countries" label="Your country" class="pb-3" @input="handleInput" />
and in methods:
methods: {
handleInput (value) {
this.country = value;
}
}
Hope that will help :)
Best regards,
Jakub from MDB
Jakub Mandra staff premium commented 6 years ago
I found that, when you use above solution, the value wont update when you choose one of the option from list. It will only work for typing. I fixed the bug, but it can be released only with whole package (which will happen in 2 weeks). If you need you can use our dev package. Contact me for further instructions via e-mail: <a href="mailto:j.mandra@mdbootstrap.com">j.mandra@mdbootstrap.com</a> Regards, Jakub from MDB
I tried using this but it seems to send the values while typing
what I would like to achieve is to only have the final selected value sent in the Input. Ideally I do not want the input the client is typing only the selected value.
Either by detecting the keyPress or some such event. Getting everything the user types is too much noise.
Magdalena Dembna staff premium commented 5 years ago
That's the standard way in which v-model for input works. If you want to, you can use the @blur or add your own event listeners with .native modifier. While using the @blur, have in mind that it happens before the final @input - so you need to detect the @input event right after @blur.
Gary Woodfine pro commented 5 years ago
Apologies but I am not sure I completely understand. Do you have an example of using .native event modifiers ?
hi, I am trying to get the value of mdb-autocomplete while typing with out any success.The only time Iam getting the input value is when I am selecting it. Any of the native events(keyup, keydown etc.) does not fire also. Can you please help me?
<mdb-autocomplete :label="label" :data="autoCompleteData" :class="cssClass"
:value="countries" @input="onUpdate" @blur="onBlur()"
:name="name" :id="id"/>
<script lang="ts">
onInput(value){
// fire only on selecting value from the list and not on typing
this.country = value;
}
</script>
thank you very much.
Since MDB Vue 6.0.0 this is actually the behaviour we went for. Just use @input.native and it should work fine:
<mdb-autocomplete
@input.native="handleChange"
:data="..."
label="..."
/>
handleChange(e) {
console.log(e.target.value);
},
Kind regards, Magdalena
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Vue
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No