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:
@@ -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, '')"
|
||||
|
Reference in New Issue
Block a user