feat: add reactive employee amount based on rows length in WorkerItem component

This commit is contained in:
puriphatt 2024-12-26 10:38:45 +07:00
parent 5890f07d89
commit 033e2fc2f6

View file

@ -1,6 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { QTableProps } from 'quasar'; import { QTableProps } from 'quasar';
import TableComponents from 'src/components/TableComponents.vue'; import TableComponents from 'src/components/TableComponents.vue';
import { watch } from 'vue';
const employeeAmount = defineModel<number>('employeeAmount', { default: 1 }); const employeeAmount = defineModel<number>('employeeAmount', { default: 1 });
@ -9,7 +10,7 @@ defineEmits<{
(e: 'check', index: number): void; (e: 'check', index: number): void;
}>(); }>();
withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
readonly?: boolean; readonly?: boolean;
fallbackImg?: string; fallbackImg?: string;
@ -85,6 +86,14 @@ const columns = [
field: 'action', field: 'action',
}, },
] satisfies QTableProps['columns']; ] satisfies QTableProps['columns'];
watch(
() => props.rows,
() => {
if (props.readonly) return;
employeeAmount.value = props.rows.length;
},
);
</script> </script>
<template> <template>
<div> <div>
@ -175,6 +184,7 @@ const columns = [
input-class="text-center" input-class="text-center"
:readonly :readonly
hide-bottom-space hide-bottom-space
:min="rows.length"
v-model="employeeAmount" v-model="employeeAmount"
/> />
</div> </div>