Я создал компонент, который позволяет пользователям выбирать объекты из списка и помещать их в другой «выбранный список», скажем так. Таким образом, в главном списке 100 пунктов, и столько же в списке выбранных пользователей. Конечно, они могут удалять и добавлять элементы по своему усмотрению.
Есть две кнопки внизу модальной. Отмена и обновление. Где Отмена забывает все, что они добавили или удалили (по сути, Отмена, когда они открыли модальные), а Обновление технически ничего не делает, потому что когда вы добавляете и удаляете, я фактически обновляю реальный выбранный список.
Итак, у моего data есть два свойства (среди прочего, конечно):
originalSelections: [],
selectedMedications: [],
Существует метод, который вызывается только один раз для set свойства selectedMedications, независимо от текущего состояния originalSelections. У меня есть console.log, чтобы доказать, что я не использую этот метод более одного раза, и он НИКОГДА не получит удар снова.
console.log('Post Initing');
let Selected = [];
for (let med of this.value.OtherNotFromEpic) {
let match = this.otherMedications.find(x => { return x.value === med });
if (match) {
Selected.push(JSON.parse(JSON.stringify(match)));
this.originalSelections.push(JSON.parse(JSON.stringify(match)));
this.selectedMedications.push(JSON.parse(JSON.stringify(match)));
}
}
Я был озадачен тем, почему selectedMedications менялся, поэтому я добавил watch, чтобы сообщить мне, если это было:
watch: {
originalSelections(newValue) {
console.log(' ** Original Selection Changed', this.init, newValue);
},
},
Метод отмены выглядит следующим образом:
cancel() {
$('#' + this.modalID).modal('hide');
console.log('Cancel: this.originalSelections', JSON.parse(JSON.stringify(this.originalSelections)));
this.selectedMedications = this.originalSelections;
this.$nextTick(() => {
console.log(' Cancelled: this.selectedMedications', JSON.parse(JSON.stringify(this.selectedMedications)));
});
},
Вы можете видеть, что я устанавливаю selectedMedications на то, что было изначально.
Странно то, что ... Это работает на 100%, когда я впервые поднимаю модал. Поэтому я открываю модальное, удаляю элемент, отменяю модальный, и он возвращает элемент, который я удалил Отлично!
Если я снова поднимаю модал, удаляю тот же предмет или любой другой предмет, отменяю модал, и этот предмет остается удаленным, и часы действительно бьют. У меня нет другого места в коде, где когда-либо случается originalMedications = … или originalMedications.push или даже originalMedications.slice. И я понимаю, что код JSON.parse(JSON.stringify(match)), который я использую для его установки, создает новый объект, а не ссылку.
Еще одна странная вещь, которую я обнаружил, заключается в том, что если я обновлю страницу, открою модальное окно, отменим, не добавляя и не удаляя. Затем я снова поднимаю модальный режим и пытаюсь либо добавить, либо удалить, а затем отменить модальный, эти элементы не возвращаются обратно в состояние originalMedications, поскольку originalMedications совпадает с selectedMedications. Aargh!
Так КАК изменить свойство, когда я никогда ничего не делаю с ним после его первоначальной настройки?