CODEWITHSUNDEEP
vue.jsnuxt.jsvuejs3nuxt3.js
Kishan Bhensadadiya
Kishan Bhensadadiya

Reputation: 544

vue 3 watch specific object's item from array

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.

Upvotes: 1

Views: 3019

Answers (3)

Kishan Bhensadadiya
Kishan Bhensadadiya

Reputation: 544

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 });

Upvotes: 0

Kaushal Modi
Kaushal Modi

Reputation: 31

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)
})

Upvotes: 2

Nitin Gauswami
Nitin Gauswami

Reputation: 11

You can try this:

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

});

Upvotes: 0

Related Questions