Add lifecycle hook and fetch data on mounted

Add two-way binding for menitValue in InputWithSuffix
Add two-way binding for timeValue in InputNumber
Refactor filterData function in Table_5.vue
This commit is contained in:
probdg
2024-02-10 05:56:05 +07:00
parent 2e4eb3b6b2
commit 83a25527bb
14 changed files with 741 additions and 511 deletions

View File

@@ -1,35 +1,44 @@
<script setup lang="ts">
const props = defineProps({
placeholder: {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: false,
},
readonly: {
type: Boolean,
default: false,
},
value: {
type: Number,
default: "",
},
})
import { ref, watch } from 'vue'
const props = defineProps({
placeholder: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
},
value: {
type: Number,
default: ''
}
})
const emit = defineEmits(['update:menitValue'])
const menitValue = ref(1)
watch(menitValue, (newValue) => {
console.log('newValue', newValue)
emit('update:menitValue', newValue)
})
</script>
<template>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<input
v-model="menitValue"
autocomplete="off"
type="text"
:value ="props.value"
:placeholder="placeholder"
:disabled="disabled"
:readonly="readonly"
inputmode="numeric"
pattern="[0-9.]*"
defaultValue="1"
oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
onblur="this.value = this.value ? this.value + ' Menit' : ''"
onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"