forked from geolba/tethys.backend
43 lines
880 B
Vue
43 lines
880 B
Vue
|
<template>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label>
|
||
|
|
<span v-if="label" class="block font-semibold">{{ label }}</span>
|
||
|
|
<n-input v-bind:type="type" v-model:value="internalValue" v-bind:placeholder="placeholder"/>
|
||
|
|
</label>
|
||
|
|
<div v-if="Array.isArray(errors)" class="text-xs text-red-500">
|
||
|
|
{{ errors.join(', ') }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import { NInput } from 'naive-ui';
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
default: 'text',
|
||
|
|
},
|
||
|
|
label: String,
|
||
|
|
placeholder: String,
|
||
|
|
modelValue: String,
|
||
|
|
errors: Array,
|
||
|
|
});
|
||
|
|
|
||
|
|
const emit = defineEmits(['update:modelValue']);
|
||
|
|
|
||
|
|
const internalValue = computed({
|
||
|
|
// get() {
|
||
|
|
// return props.modelValue;
|
||
|
|
// },
|
||
|
|
// set(value) {
|
||
|
|
// emit('update:modelValue', value);
|
||
|
|
// },
|
||
|
|
get: () => props.modelValue,
|
||
|
|
set: (value) => {
|
||
|
|
emit('update:modelValue', value);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|