On my webpage, I have a table that showcases an array of "currency" objects:
<tbody>
<tr v-for="currency in currencies" v-bind:key="currency.Name">
<td class="uk-width-medium">{{currency.Enabled}}</td>
<td class="uk-width-medium">{{currency.Name}}</td>
<td class="uk-width-medium">{{currency.MinDepositAmount}}</td>
...
There is also a "+" button that opens up a modal popup allowing users to input values.
<payment-method-currency-modal id="paymentMethodCurrencyPopup" :currency="newCurrency" @onSave="addCurrency" title="Add currency">
When the user clicks the "Save" button on the dialog, the dialog closes and triggers the following method in the parent component:
addCurrency() {
if (!this.currencies) {
console.log("currencies was undefined. creating.");
this.currencies = [];
}
this.currencies.push(this.newCurrency);
this.newCurrency = { MinorUnitMultiplier: 100, Enabled: true };
console.log(this.currencies);
},
The purpose of the console logs is for debugging. The function first checks if this.currencies is undefined, initializes it as an empty array if necessary, then adds the new element (newCurrency) and resets it to a default object.
Here's the strange behavior observed with the code:
- Adding an element named "a" prompts the message that
currencieswas undefined but created. Object "a" is added to the array, yet it doesn't show in the table. - Subsequent addition of element "b" shows that
currenciesis still undefined before adding "b", which does display in the table. - Adding element "c" updates the array correctly but only displays "b" in the table, omitting "a".
- Continuing to add elements results in all additions being present in the array except the second one, reflected in the table as well.
This consistent behavior raises questions about why the second element is consistently omitted both in the array used by addCurrency and displayed in the table. What could be causing this? If you have insights, please share!