vue 3 watch specific object's item from array

Question

I am working on nuxt 3 (vue 3) and I need to watch the particular item of the specific object from the array.

My array

const formData = reactive({
   addressDetails: [
     {
      address: "",
      street: "",
      suburb: "",
      state: "",
      postCode: "",
      country: "",
      unitNumber: "",
      streetNumber: "",
      streetName: "",
      timeAtaddressYears: "",
      timeAtaddressMonths: "0",
    },
     {
      address: "",
      street: "",
      suburb: "",
      state: "",
      postCode: "",
      country: "",
      unitNumber: "",
      streetNumber: "",
      streetName: "",
      timeAtaddressYears: "",
      timeAtaddressMonths: "0",
    },
   {
      address: "",
      street: "",
      suburb: "",
      state: "",
      postCode: "",
      country: "",
      unitNumber: "",
      streetNumber: "",
      streetName: "",
      timeAtaddressYears: "",
      timeAtaddressMonths: "0",
    },

   ]      
});

Here, I want to watch if any timeAtaddressYears items value has changed but not on the whole formData.addressDetails value. Ex if I add new address details then no need to any watch but in specific address details if I change any address's timeAtaddressYears then watch should be called.

Kaushal Modi · Accepted Answer · 2023-01-30 06:09:08Z

2

const formData = reactive({
   addressDetails: [
     {
      address: "",
      street: "",
      suburb: "",
      state: "",
      postCode: "",
      country: "",
      unitNumber: "",
      streetNumber: "",
      streetName: "",
      timeAtaddressYears: "",
      timeAtaddressMonths: "0",
    },
   ]      
})

const selected = computed(() => {
  return formData.addressDetails.map(form => form.timeAtaddressYears)
})

watch(selected, (newValue, oldValue) => {
      console.log(newValue, oldValue)
})

edited Jan 30, 2023 at 6:09

answered Jan 27, 2023 at 9:47

Kaushal Modi

312 bronze badges

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

4 Comments

Kishan Bhensadadiya Over a year ago

As I mentioned I am working with nuxt 3 and nuxt 3 is based on Vue 3 so this syntax will not work and I need an extra level watch as I mentioned. Thanks for your comment

Kaushal Modi Over a year ago

@KishanBhensadadiya Now I added code with VUE3 syntax and you have to do some modification with your logic and It will be help for you. Thanks

Kishan Bhensadadiya Over a year ago

Thank you for your revert try! I think it is a lengthy process using computed and watch both to indicate only one change. I have posted the answer on my way as per the Vue 3 documentation

Kaushal Modi Over a year ago

Okay, My code is working for only change value of timeAtaddressYears from your array of object.

Tyler2P · Accepted Answer · 2023-01-29 14:22:56Z

0

You can try this:

watch(() => formData.addressDetails[0].address, (newValue, oldValue) => {

});

edited Jan 29, 2023 at 14:22

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Jan 27, 2023 at 6:29

Nitin Gauswami

113 bronze badges

4 Comments

Kishan Bhensadadiya Over a year ago

Thanks for your comment but I also need to watch if formData.addressDetails[1].address value has changed.

Nitin Gauswami Over a year ago

if(formData.addressDetails[1].address !== previousAddressValue) { console.log("The address valuechanged."); } try this may be works

Kishan Bhensadadiya Over a year ago

It will not work. I think you didn't clear with requirements. Please check the whole thing first and address details are dynamic and it is not fixed user can add or remove any address

Kalnode Over a year ago

@KishanBhensadadiya You should add more array entries in your original post, so people understand that you want an abstract solution.

Kotana Sai · Accepted Answer · 2023-02-01 13:48:21Z

0

I have found a similar one, we need to add a deep watcher if we want to watch the particular item of the specific object from the array.

VueJS Deepwatchers

watch(
  () => formData,
  (newValue, oldValue) => {
    console.log(newValue, oldValue);
  },
  { deep: true });

edited Feb 1, 2023 at 13:48

Kotana Sai

1,9143 gold badges17 silver badges32 bronze badges

answered Jan 30, 2023 at 11:18

Kishan Bhensadadiya

5562 gold badges11 silver badges36 bronze badges

1 Comment

Hardik Desai Over a year ago

As per I know we can also watch formData.addressDetails only because if formData contains other state than addressDetails it will also watch for those too.

Collectives™ on Stack Overflow

vue 3 watch specific object's item from array

3 Answers 3

4 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related