Topic: MdbSelect - Programmatically select an option

Storism free asked 3 years ago


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


Mikołaj Smoleński staff answered 3 years ago


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


Mikołaj Smoleński staff answered 3 years ago


Thanks for your remarks. We'll extend the documentation soon according to that issue.

Best regards


digitalmanagerguru free answered 3 years ago


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.


Storism free answered 3 years ago


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' }
        ]
    }
},


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.2.0
  • Device: MacBook Pro
  • Browser: Chome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No