2019-09-28 21:42:04 +03:00
|
|
|
<template>
|
|
|
|
|
<div>
|
2019-10-18 16:48:08 +03:00
|
|
|
<v-row dense align="center">
|
|
|
|
|
<v-col :cols="3">
|
2019-09-28 21:42:04 +03:00
|
|
|
<span>{{name}}</span>
|
|
|
|
|
</v-col>
|
2019-10-18 16:48:08 +03:00
|
|
|
<v-col :cols="9">
|
2019-10-29 23:58:06 +02:00
|
|
|
<v-text-field @keydown="handleKeyboard" dark v-model="localValue" dense :disabled="disabled"
|
|
|
|
|
:error-messages="errorMessage"/>
|
2019-09-28 21:42:04 +03:00
|
|
|
</v-col>
|
|
|
|
|
</v-row>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
name: 'Input',
|
2019-10-29 23:58:06 +02:00
|
|
|
props: ['name', 'value', 'disabled', 'errorMessage'],
|
2019-09-28 21:42:04 +03:00
|
|
|
data() {
|
2019-10-29 23:58:06 +02:00
|
|
|
return {}
|
2019-09-28 21:42:04 +03:00
|
|
|
},
|
2019-10-29 23:58:06 +02:00
|
|
|
methods: {
|
|
|
|
|
handleKeyboard(event) {
|
|
|
|
|
if (event.key == "Enter") {
|
2019-10-18 16:48:08 +03:00
|
|
|
this.$emit("Enter");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
2019-10-29 23:58:06 +02:00
|
|
|
computed: {
|
|
|
|
|
localValue: {
|
|
|
|
|
get() {
|
2019-09-28 21:42:04 +03:00
|
|
|
return this.value;
|
|
|
|
|
},
|
2019-10-29 23:58:06 +02:00
|
|
|
set(value) {
|
|
|
|
|
this.$emit('input', value);
|
2019-09-28 21:42:04 +03:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="" scoped>
|
2019-10-29 23:58:06 +02:00
|
|
|
|
2019-09-28 21:42:04 +03:00
|
|
|
</style>
|