javascriptvue.jseventsvuejs3watch

How to watch for multiple values in Vue 3 script setup?


I have this watcher (inside <script setup>:

const form = reactive({
    body: '',
    image: ''
})

watch(() => form.image, () => {
    console.log(form.image)
})

which I want to expand to watch two reactive objects:

watch(() => (form.image, form.body), () => {
    console.log(form)
})

but this now only watches form.body. I've been trying to implement this question's answer, but it doesn't seem to work like my watcher with new and old values. I want the watcher to trigger, when both values are updated.


Solution

  • I figured something out. It'll trigger when both values are true. You can put your own conditions in there.

    const form = reactive({
        body: '',
        image: ''
    })
    
    watch(() => [form.image, form.body], () => {
        if (form.image && form.body) {
            console.log(form)
        }
    })
    
    This seems to work for simple cases but when the code base gets large and using `global proxies` (like a reactive store) as well as using too many proxies, it can fail. I've tried it with 4 global proxies on a large project and it only triggered sometimes.

    Like @tao suggested in the comments, if you're working with nested objects, you have to use { deep: true } in your watcher.

    More about deep watchers in the vue docs.