jetformbuilder
/
assets
/
src
/
admin-vuex-package
/
components
/
TableColumns
/
select-control
/
SelectControl.vue
jetformbuilder
/
assets
/
src
/
admin-vuex-package
/
components
/
TableColumns
/
select-control
Last commit date
SelectControl.vue
2 years ago
index.js
2 years ago
SelectControl.vue
43 lines
| 1 | <template> |
| 2 | <select @input="onInput" :value="getValue"> |
| 3 | <option |
| 4 | v-for="type in options.options" |
| 5 | :value="type.value" |
| 6 | :disabled="type.disabled" |
| 7 | > |
| 8 | {{ label( type ) }} |
| 9 | </option> |
| 10 | </select> |
| 11 | </template> |
| 12 | |
| 13 | <script> |
| 14 | |
| 15 | |
| 16 | export default { |
| 17 | name: 'select--control', |
| 18 | props: [ 'value', 'options' ], |
| 19 | computed: { |
| 20 | getValue() { |
| 21 | return this.value?.value ?? this.value; |
| 22 | }, |
| 23 | }, |
| 24 | methods: { |
| 25 | onInput( { target: { value } } ) { |
| 26 | this.$emit( 'input', value ); |
| 27 | }, |
| 28 | label( option ) { |
| 29 | return option.label ?? option.text ?? ''; |
| 30 | }, |
| 31 | }, |
| 32 | }; |
| 33 | </script> |
| 34 | |
| 35 | <style scoped lang="scss"> |
| 36 | |
| 37 | select { |
| 38 | option:disabled { |
| 39 | background-color: #f5f5f5; |
| 40 | } |
| 41 | } |
| 42 | |
| 43 | </style> |