У меня типичное VueJs приложение с отдельными файловыми компонентами. В одном из моих пользовательских интерфейсов поведение обновления DOM, которое я вижу, непонятным образом сбивает с толку. У меня есть простой случай использования, когда я использую массив объектов для отображения списка элементов (который имеет метку, флажок и текстовое поле) внутри моего представления. Все, что я хочу, это очистить изменения, сделанные пользователем. Вот скриншот пользовательского интерфейса:
А вот мой код:
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 () .
Но, Почему? ????
Может кто-нибудь объяснить это поведение, пожалуйста. Спасибо.