Answer the question
In order to leave comments, you need to log in
VUE, how to solve the strange behavior of binding two properties?
Good day, I ask you to assist in solving the problem of automatically linking two properties.
There are two components (main and child). Basically, there are two identical arrays of objects (I use to compare the presence of changes):
componentListWorksItems: [],
componentListWorksItemsForComparison: [],
<tr v-for="(itemWork, indexWork) in componentListWorksItems" :key="indexWork">
<td>
<work-item-component v-model="componentListWorksItems[indexWork]"
@onUpdateEquipmentQuantityByMonth="handlerUpdateEquipmentQuantityByMonth(indexWork, $event)"
@onChangingTotalsEquipmentItems="handlerOnChangingTotalsEquipmentItems(indexWork, $event)"
@onSaveWorkItemInDatabase="handlerOnSaveWorkItemInDatabase(true, $event)"
:comparison-list-item="componentListWorksItemsForComparison[indexWork]['pivot']"
:index="indexWork"
/>
</td>
</tr>
handlerOnChangingTotalsEquipmentItems(workItemIndex, {newSumEquipment, yearLaborCost}) {
this.$set(this.componentListWorksItems[workItemIndex]['pivot'], 'year_estimated_quantity', newSumEquipment);
this.$set(this.componentListWorksItems[workItemIndex]['pivot'], 'year_labor_cost', yearLaborCost);
}
computed: {
isChanged: function () {
return JSON.stringify(this.value['pivot']) !== JSON.stringify(this.comparisonListItem);
}
updateSingleWorkItemInLocalListFromDatabase(workItemIndex, workItemData) {
this.$set(this.componentListWorksItems[workItemIndex], 'pivot', workItemData);
this.$set(this.componentListWorksItemsForComparison[workItemIndex], 'pivot', workItemData);
}
Answer the question
In order to leave comments, you need to log in
After this manipulation, the problem begins:
// два объекта с одинаковыми данными
let a = { a: 1, b: 1 }
let b = { b: 1, a: 1 }
let isChange = JSON.stringify(a) !== JSON.stringify(b);
// isChange будет равно true
// потому что строка будет отличаться из-за разной позиции свойств объекта
because the array does not get the object itself, but only a reference to this object.
updateSingleWorkItemInLocalListFromDatabase(workItemIndex, workItemData) {
let workItemDataForComparison = Object.assign({}, workItemData);
this.$set(this.componentListWorksItems[workItemIndex], 'pivot', workItemData);
this.$set(this.componentListWorksItemsForComparison[workItemIndex], 'pivot', workItemDataForComparison);
}
updateAllWorksItemsInLocalListFromDatabase(worksItemsData) {
let worksItemsDataForComparison = JSON.parse(JSON.stringify(worksItemsData));
this.componentListWorksItems = worksItemsData;
this.componentListWorksItemsForComparison = worksItemsDataForComparison;
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question