Topic: MdbSelect - Programmatically select an option
Is there a way I can programmatically select a value. I am able to save a users input using the @getValue event, but when I re-open my page I would like to set the value back to that one.
I have tried all sorts, below is my latest attempt
data() {
return {
basicOptions: [
{ text: 'Boolean', value: 'boolean' },
{ text: 'Array', value: 'array' },
{ text: 'Number', value: 'number' },
{ text: 'String', value: 'string' },
{ text: 'Integer', value: 'integer' }
],
options: []
}
},
watch: {
item: function(val, oldVal) {
if (val) {
this.loadDataType(val.dataType)
}
}
},
methods: {
loadDataType(val) {
this.basicOptions.forEach((option) => {
option.selected = option.value === val
})
this.$set(this, 'options', this.basicOptions) // this.options = this.basicOptions
},
getSelectValue(i) {
this.item.dataType = i
}
}
Thanks
Phill
Hi there,
I think here in the first example we have similar case: https://vue.mdbootstrap.com/#/forms/pro/select
To change value of select we just have to change basicOptions array of objects, like this:
selectOption(key) {
this.basicOptions.forEach(option => {
option.selected = false;
});
this.$set(this.basicOptions[key], "selected", true);
this.basicOptions.sort();
}
Please let me know if this helped to solve your problem.
Best regards
Thanks Mikołaj,
Your code got me working, I did a small tweak but all good now
loadDataType(key) {
this.basicOptions.forEach((option) => {
option.selected = false
})
let selectedOption = this.basicOptions.find((o) => o.value === key)
this.$set(selectedOption, 'selected', true)
this.basicOptions.sort()
}
-
data() {
return {
basicOptions: [
{ text: 'Boolean', value: 'boolean' },
{ text: 'Array', value: 'array' },
{ text: 'Number', value: 'number' },
{ text: 'String', value: 'string' },
{ text: 'Integer', value: 'integer' }
]
}
},
this.basicOptions.sort();
I had the same problem and this did the trick. Thanks!
It should be on the documentation. There is no information about how to set the selected value as the default one.
Thanks for your remarks. We'll extend the documentation soon according to that issue.
Best regards
Answered
- User: Free
- Premium support: No
- Technology: Vue
- MDB Version: 6.2.0
- Device: MacBook Pro
- Browser: Chome
- OS: MacOS
- Provided sample code: No
- Provided link: No