<script lang="ts">
    export default {
        props: {
            data: {
                type: Object,
                required: true
            },
            filter: {
                type: Object,
                required: true
            },
            prop: {
                type: String,
                required: true
            }
        },
        data() {
            return {
                data: this.data,
                filter: this.filter,
                prop: this.prop
            }
        },
        methods: {
            filterValue(event: any){
                this.data[this.prop] = event.target.value;
                this.$emit('filterValue', event);
            }
        }
    }
</script>

<template>
    <v-text-field 
        @blur="filterValue($event)" 
        :v-model="data" 
        :model-value="filter">
    </v-text-field>
</template>