How to Watch changes to a variable in Vue3 + Inertiajs

I want to watch for changes to the form, specifically the name variable. I don't know how to do it. Maybe I am not referencing the variable well from the watcher.

export default {
    props: {value: Object},


    setup (props) {
        const form = useForm({
            name: props.value.value_name,
        })

        return { form }
    },

    watch: {
        name: _.debounce(function(query) {
            console.log('I was changed')
        }, 500)
    },

tykus

3 years ago

Level 104

The data you want to watch is not name but form.name; you can watch the form data like this:

watch(() => form.data(), (newVal, oldVal) => {
    let changedFields = Object.keys(newVal).filter(field => newVal[field] !== oldVal[field]);
    // do something
})

Please or to participate in this conversation.