diff options
Diffstat (limited to 'src/components/Properties/PropertySelect.vue')
| -rw-r--r-- | src/components/Properties/PropertySelect.vue | 50 |
1 files changed, 27 insertions, 23 deletions
diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue index fb1aa827..3769967f 100644 --- a/src/components/Properties/PropertySelect.vue +++ b/src/components/Properties/PropertySelect.vue @@ -26,14 +26,9 @@ <property-title v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName" /> <div class="property__row"> - <!-- type selector --> - <multiselect v-if="propModel.options" v-model="localType" - :options="propModel.options" :searchable="false" :placeholder="t('contacts', 'Select type')" - class="multiselect-vue property__label" track-by="id" label="name" - @input="updateType" /> <!-- if we do not support any type on our model but one is set anyway --> - <div v-else-if="selectType" class="property__label">{{ selectType.name }}</div> + <div v-if="selectType" class="property__label">{{ selectType.name }}</div> <!-- no options, empty space --> <div v-else class="property__label">{{ propModel.readableName }}</div> @@ -41,9 +36,10 @@ <!-- delete the prop --> <button :title="t('contacts', 'Delete')" class="property__delete icon-delete" @click="deleteProperty" /> - <multiselect v-model="localValue" :options="options" :placeholder="t('contacts', 'Select option')" + <multiselect v-model="matchedOptions" :options="propModel.options" :placeholder="t('contacts', 'Select option')" class="multiselect-vue property__value" track-by="id" label="name" - @input="updateValue" /> + @input="updateValue"> + </multiselect> </div> </div> </template> @@ -76,11 +72,6 @@ export default { default: '', required: true }, - options: { - type: Array, - default: () => [], - required: true - }, isFirstProperty: { type: Boolean, default: true @@ -93,8 +84,8 @@ export default { data() { return { - localValue: this.value, - localType: this.selectType + localValue: this.value + // localType: this.selectType } }, @@ -104,7 +95,20 @@ export default { let isLast = this.isLastProperty ? 1 : 0 // length is one & add one space at the end return hasTitle + 1 + isLast + }, + matchedOptions: { + get() { + let selected = this.propModel.options.find(option => option.id === this.localValue) + return selected || { + id: this.localValue, + name: this.localValue + } + }, + set(value) { + this.localValue = value.id + } } + }, watch: { @@ -115,10 +119,10 @@ export default { */ value: function() { this.localValue = this.value - }, - selectType: function() { - this.localType = this.selectType } + // selectType: function() { + // this.localType = this.selectType + // } }, methods: { @@ -136,12 +140,12 @@ export default { updateValue: debounce(function(e) { // https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier this.$emit('update:value', this.localValue) - }, 500), - - updateType: debounce(function(e) { - // https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier - this.$emit('update:selectType', this.localType) }, 500) + + // updateType: debounce(function(e) { + // // https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier + // this.$emit('update:selectType', this.localType) + // }, 500) } } |