vue 3从数组中监视特定对象的项目

332nm8kg 于 2023-01-31 发布在 Vue.js

关注(0)|答案(3)|浏览(120)

我正在处理nuxt 3（vue 3），我需要从数组中查看特定对象的特定项。

我的数组

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

在这里，我想观察任何timeAtaddressYears项目值是否已更改，但不是整个formData.addressDetails值。例如，如果我添加新的地址详细信息，则不需要任何监视，但在特定地址详细信息中，如果我更改任何地址的timeAtaddressYears，则应调用监视。

vue.js

来源：https://stackoverflow.com/questions/75254681/vue-3-watch-specific-objects-item-from-array

3条答案

按热度按时间

wztqucjr1#

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

赞(0）回复(0）举报 2023-01-31

vq8itlhq2#

你可以试试这个：

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

});

赞(0）回复(0）举报 2023-01-31

k3bvogb13#

我发现了一个类似的例子，如果我们想从数组中观察特定对象的特定项，我们需要添加一个深度观察器。
https://vuejs.org/guide/essentials/watchers.html#deep-watchers

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

赞(0）回复(0）举报 2023-01-31

我来回答

vue 3从数组中监视特定对象的项目

3条答案

相关问题

热门标签

最新问答