Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

146
Views
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.

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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

about 4 years ago · Juan Pablo Isaza Report

0

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)
    }
})
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!