Vue id property inside prop object does not get Updated

Question

I have the following array in the parent component

dateArr = [
  {id:1, name:'Name1', date:"2020-01-01", iscomplex:1},
  {id:2, name:'Name2', date:"2020-02-01", iscomplex:1},
  {id:3, name:'Name3', date:"2020-03-01", iscomplex:0},
  {id:4, name:'Name4', date:"2020-04-01", iscomplex:0},
]

Now this array is used to populate aggrid table. Now in every row I have displayed a pen icon and on click of that a dialog box opens which is the child component.
Now the child component just contain the card of the dialog box, while the v-dialog is created in the parent component because of the aggrid functionality.
Now I pass the row object as a prop to the child component. Now here some weird thing is happening, the child component has the following properties

props: {
    dateObj: {
      type: Object,
      default() {
        return null;
      },
    },
  },
data(){
  return{
    formVal: {},
  }
}

So now I'm watching the props as follows to assign the prop to the formVal and also using mounted for assigning the prop to formVal when the component loads for the first time.

watch: {
    dateObj: {
      handler: function (newValue) {
        this.formVal = { ...newValue };
      },
      deep: true,
    },
  },
mounted() {
  if (this.dateObj) {
      this.formVal = { ...this.dateObj };
    }
  },

Now the thing is that all the values get updated in the formVal except the id, but when I convert the id values into string, then it works as expected. The parent component works totally well, so I'm not adding the code for it. What am I missing here due to which the id is not getting updated, is this something related to Vue reactivity problem?

i think there's no need to add that initialization in mounted, you could just add immediate:true in the watch property. have you tried computed property? — Boussadjra Brahim
Since I need to add more fields in formVal, so I cannot use computed property. And immediate true also does not get the expected output. It's only the id value which is not getting updated if it's a number. — beingyogi

Robertino Vasilescu Robertino Vasilescu · Accepted Answer · 2020-10-26T09:44:30

0

votes

deep: true

in watch after the handler.

Vue id property inside prop object does not get Updated

1 Answers