MdbSelect - Programmatically select an option - Material Design for Bootstrap

Topic: MdbSelect - Programmatically select an option

Storism asked 5 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

Add comment

Mikołaj Smoleński staff answered 5 years ago

1 0 Best answer

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

Add comment

Storism answered 5 years ago

0 0 Best answer

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

Add comment

digitalmanagerguru answered 5 years ago