Свойство идентификатора Vue внутри объекта prop не обновляется

#vue.js #ag-grid

Вопрос:

У меня есть следующий массив в родительском компоненте

 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},
]

Теперь этот массив используется для заполнения таблицы aggrid. Теперь в каждой строке я отобразил значок пера, и при нажатии на него открывается диалоговое окно, которое является дочерним компонентом.

Теперь дочерний компонент содержит только карточку диалогового окна, в то время как v-dialog создается в родительском компоненте из-за функциональности aggrid.

Теперь я передаю объект row в качестве prop дочернему компоненту. Теперь здесь происходит какая-то странная вещь, дочерний компонент обладает следующими свойствами

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

Итак, теперь я наблюдаю за реквизитами следующим образом, чтобы назначить реквизит formVal, а также использую mounted для назначения реквизита formVal при загрузке компонента в первый раз.

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

Теперь дело в том, что все значения обновляются в formVal, кроме id, но когда я преобразую значения id в строку, тогда все работает так, как ожидалось. Родительский компонент работает абсолютно нормально, поэтому я не добавляю для него код. Чего мне здесь не хватает, из-за чего идентификатор не обновляется, связано ли это с проблемой реактивности Vue?

1. я думаю, что нет необходимости добавлять эту инициализацию в mounted, вы можете просто добавить immediate:true свойство watch. вы пробовали вычисляемое свойство?

2. Поскольку мне нужно добавить больше полей в formVal, я не могу использовать вычисляемое свойство. И немедленное значение true также не получает ожидаемого результата. Это только значение идентификатора, которое не обновляется, если это число.

3. Я нашел ошибку. Спасибо всем за ваше время.

Ответ №1:

 deep: true

в watch после обработчика.