V-FOR doesn\\\'t work in MDBSELECT

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

<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>

<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>

Yes, I will make sure of it.

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

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.

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

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

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