VueJs сбивающее с толку поведение относительно реактивности - PullRequest
0 голосов
/ 01 апреля 2020

У меня типичное VueJs приложение с отдельными файловыми компонентами. В одном из моих пользовательских интерфейсов поведение обновления DOM, которое я вижу, непонятным образом сбивает с толку. У меня есть простой случай использования, когда я использую массив объектов для отображения списка элементов (который имеет метку, флажок и текстовое поле) внутри моего представления. Все, что я хочу, это очистить изменения, сделанные пользователем. Вот скриншот пользовательского интерфейса:

enter image description here

А вот мой код:

methods: {
.
.
.
   undoChanges() {
      let self = this;
      for (let i = 0; i < this.currentOmis.length; i++) {
        let omic = _.find(
          self.omiCustomizations,
          omic => omic.ItemCustomizationId == self.currentOmis[i].DbId
        );

        let curVal = _.find(
          self.itemCustomizations,
          itc => itc.Id == self.currentOmis[i].DbId
        );
        curVal["OmicId"] = omic ? omic.Id : -1;
        curVal["OutletEnteredTextForCustomer"] = omic
          ? omic.OutletEnteredTextForCustomer
          : "";
        curVal["IsSelected"] = omic != undefined;

        //Vue.$set(this.currentOmis, i, curVal); --- DOM NOT UPDATED
        //this.$set(this.currentOmis, i, curVal); --- DOM NOT UPDATED
        //let x = Object.assign({}, curVal); --- DOM NOT UPDATED
        //let x = _.cloneDeep({ --- DOM NOT UPDATED
        let x = {
          DbId: curVal["Id"].toString(),
          OmiId: curVal["OmicId"],
          OutletEnteredTextForCustomer: curVal["OutletEnteredTextForCustomer"],
          CustomizationText: curVal["CustomizationText"],
          IsSelected: curVal["IsSelected"],
          HintTextForOutlet: curVal["HintTextForOutlet"]
        };

        //this.currentOmis[i] = x; --- DOM NOT UPDATED

        this.currentOmis.splice(i, 1, x); // --- DOM UPDATED ONLY WHEN .toString() called on DbId
      }
    },
.
.
.
}

Ожидаемое поведение происходит, тогда и только тогда, когда .toString () вызывается по адресу:

DbId: curVal["Id"].toString()

Ни один из вышеупомянутых опробованных методов не работал, кроме добавления вызова .toString () .

Но, Почему? ????

Может кто-нибудь объяснить это поведение, пожалуйста. Спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...