Hi there,

Vue Select was completely rebuild and now You can use loops but You have to pass options as a Object, not as a tag like it was before. Please read more here: https://mdbootstrap.com/docs/vue/forms/select/

Best regards

Is this already solved? I still can't use v-for in the select.

Dear @ruudboon, @Pisarev, @shilu911  and @Soluti Alexandre Henrique de Souza Torres 

The update time is now, baby! MDB Vue 4.9.0 release is here, and the answer for the prayers in the thread with it - it brings a total <mdb-select> component makeover. Now it is fully dynamic, takes care of itself and its children, minds own business and has a rather stylish conduct!

note: mind the syntax change!

Cheers,
Kuba

Any updates regarding this issue? Can you give an estimate when to expect a fix? 

Yes. The 4.8.2 brought an improvement in a downloaded package usability and other treats, including minor bug fixes and styling updates. For anyone interested in following newest advancements in the package, here is our changelog.

For everybody following this topic. 4.8.2 is still having this issue

Yes, I will make sure of it.

<mdb-select search @getValue="selectClient">
  <option disabled selected>Kies een client</option>
  <option v-for="client in clients" v-bind:key="client.client_id">{{client.firstname}} {{client.lastname}}</option>
</mdb-select>
<span v-for="client in clients" v-bind:key="client.client_id">{{client.firstname}} {{client.lastname}}</span>

<template>
  <component :is="tag" :class="wrapperClasses" :style="wrapperStyles" :data-multiple="this.multiple" v-on-clickaway="away">
    <span :class="caretClasses">▼</span>
    <mdb-select-input @click.native="toggle = !toggle" :text="inputText" :value="inputValue" :disabled="disabled" :valid="valid" :invalid="invalid" :errorMsg="errorMsg" successMsg="successMsg" />
    <transition @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave">
      <mdb-select-options v-if="toggle" :search="search" class="collapse-item">
        <mdb-select-option v-for="(option, index) in options" :active="isActive(option.value)" :disabled="!!option.disabled" :value="option.value" :key="index" :icon="option.icon" @click.native="onChange(option)">{{option.text}}</mdb-select-option>
        <mdb-btn v-if="multiple" save color="primary" size="sm" @click.native="toggle = !toggle">Save</mdb-btn>
      </mdb-select-options>
    </transition>
  </component>
</template>

<script>
  import classNames from 'classnames';
  import {
    mdbSelectInput,
    mdbSelectOption,
    mdbBtn,
    mdbSelectDropdown as mdbSelectOptions
  } from 'mdbvue';
  import { mixin as clickaway } from 'vue-clickaway';

  const Select = {
    name: 'Select',
    components: {
      mdbSelectInput,
      mdbSelectOptions,
      mdbSelectOption,
      mdbBtn
    },
    model: {
      prop: 'value',
      event: 'change',
    },
    props: {
      tag: {
        type: String,
        default: "div"
      },
      color: {
        type: String
      },
      multiple: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      },
      search: {
        type: Boolean
      },
      wrapperClass: {
        type: String
      },
      wrapperStyle: {
        type: String
      },
      caretClass: {
        type: String
      },
      caretStyle: {
        type: String
      },
      getValue: {
        type: Function
      },
      value: {
        type: [String, Array],
      },
      options: {
        type: Array,
        default: [],
      },
      successMsg: {
        type: String
      },
      errorMsg: {
        type: String
      },
      valid: {
        type: Boolean
      },
      invalid: {
        type: Boolean
      },
    },
    data() {
      return {
        toggle: false,
        // inputValue: '',
        // inputText: 'Choose Your option',
        optionValues: [],
        optionTexts: [],
        disabledOptions: [],
        activeOptions: [],
        multiValues: [],
        icons: [],
      };
    },
    mixins: [clickaway],
    methods: {
      onChange(option) {
        if (this.multiple) {
          let values = [...this.value];
          values.push(option.value);
          this.$emit('change', values);
        } else {
          this.$emit('change', option.value);
        }
      },
      emitValue(value) {
        this.$emit('getValue', value);
      },
      away() {
        this.toggle = false;
      },
      enter(el) {
        el.style.opacity = 0;
      },
      afterEnter(el) {
        el.style.opacity = 1;
      },
      beforeLeave(el) {
        el.style.opacity = 0;
      },
      isActive(val) {
        if (this.multiple) {
          return this.value.indexOf(val) >= 0;
        } else {
          return val == this.value;
        }
      },
    },
    created() {
    },
    computed: {
      wrapperClasses() {
        return classNames(
          'select-wrapper md-form',
          this.color ? 'colorful-select dropdown-' + this.color : '',
          this.wrapperClass
        );
      },
      wrapperStyles() {
        return this.wrapperStyle;
      },
      caretClasses() {
        return classNames(
          'caret',
          this.disabled ? 'disabled' : '',
          this.caretClass
        );
      },
      caretStyles() {
        return this.caretStyle;
      },
      inputText() {
        let result = [];
        if (this.multiple) {
          if (!this.value || this.value.length == 0) {
            return result;
          }
          result = [];
          this.value.forEach(v => {
            let o = this.options.filter(option => option.value == v);
            if (o.length > 0) {
              result.push(o[0].text);
            }
          });
        } else {
          let o = this.options.filter(option => option.value == this.value);
          if (o.length > 0) {
            result.push(o[0].text);
          }
        }
        return result.join(', ');
      },
      inputValue() {
        let result = [];
        if (this.multiple) {
          if (!this.value || this.value.length == 0) {
            return result.join();
          }
          result = [];
          this.value.forEach(v => {
            let o = this.options.filter(option => option.value == v);
            if (o.length > 0) {
              result.push(o[0].value);
            }
          });
        } else {
          let o = this.options.filter(option => option.value == this.value);
          if (o.length > 0) {
            result.push(o[0].value);
          }
        }
        return result.join();
      }
    },
    watch: {
      activeOptions(index) {
        this.activeOptions[index] = this.activeOptions[index];
      },
    }
  };

  export default Select;
  export { Select as mdbSelect };
</script>

<style scoped>
  .collapse-item {
    position: absolute;
    top: 0;
    z-index: 9999;
    width: 100%;
    transition: opacity .2s;
  }
</style>