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

Question

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.

Artur Müller Romanov · Accepted Answer · 2023-03-22 16:47:15Z

12

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.

edited Mar 22, 2023 at 16:47

answered May 19, 2022 at 14:05

Artur Müller Romanov

6,15323 gold badges116 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tao Over a year ago

It works in all cases. If any of the watched array elements are non-primitive values (e.g: object, array, map) and you want to trigger the watch when their internal prop values change, you have to use { deep: true } as third param. By default, watch is shallow, for performance.

Lk77 · Accepted Answer · 2022-05-19 13:25:28Z

9

You need to call watch each time if you need multiple watchers:

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

if what you need is a watcher to watch the two then :

watch([() => form.image, () => form.body], 
([newImage, newBody], [prevImage, prevBody]) => {
    console.log(form.body, form.image)
})

if we take example on that answer : https://stackoverflow.com/a/45853349/8126784 from the question you linked

edited May 19, 2022 at 13:25

answered May 19, 2022 at 13:20

Lk77

2,4921 gold badge13 silver badges18 bronze badges

Comments

Penny Liu · Accepted Answer · 2025-04-09 12:44:01Z

0

This can be done with watchEffect it will check the reactivity:

watchEffect(() => {
  emit('update:selectedProduct', localSelectedProduct.value);
  emit('update:selectedOffer', localSelectedOffer.value);
});

Here's the vuejs docs: https://vuejs.org/guide/essentials/watchers.html#watcheffect

edited Apr 9 at 12:44

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered Oct 22, 2023 at 19:38

Angelito Tan

1511 silver badge6 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related