Adding element to array via UIKit modal not working in vuejs

问题

I have a table on my page that displays 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>
...

I have a "+" button that displays a modal popup where the user can fill in values.

<payment-method-currency-modal id="paymentMethodCurrencyPopup" :currency="newCurrency"  @onSave="addCurrency" title="Add currency">

When the "Save" button on the dialog is clicked, the dialog is closed and the following method is called on the parent:

  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 console logs are only for my debugging purposes. First the function checks if this.currencies is undefined, because in the beginning it could be. If it's undefined, it sets it to an empty array. Then it pushes the element (newCurrency object) to the array and resets newCurrency to a default new object.

Here's how the code (mis)behaves:

1. I add element with name "a". I get the message that currencies was undefined and was created. Object "a" is then pushed to the array. It is not displayed in the table.
2. I add element "b". I once again get the message that currencies is undefined (and if I put a breakpoint there I see that it is indeed undefined. currencies is then initialized and object "b" is added. It IS displayed in my table.
3. I add element "c". My addCurrency method now tells me that currencies is an array with one object - "a". Object "c" is then added, and the resulting array contains two objects - "a" and "c". However the table still only shows object "b".
4. I add element "d". My array now contains "a", "c", and "d". The table still only shows "b".

No matter how many objects I add, the array used by addCurrency will have the second element omitted ("a","c","d","e","f","g","h"...) and the table will only display the second element. This behavior, while strange, is consistent - no matter how many times I run the experiment, it behaves the same.

What might be happening?

回答1:

Alright, I figured out what is happening. The parent component (the one I'm adding the table to) is also an editor component, which can be triggered in two situations - adding a new item and editing an existing one. And it turns out that my predecessor used two different instances of the component for these two usecases. And for whatever reason, the addCurrency function for "b" is being hit on the instance I called the popup from, while all the other elements get sent to the other instance.

First thing I tried when I realized this was I assigned unique keys to each instance of my component. This didn't help. I'll google around for a solution, if I don't find one I'll try to rework the code to only use one instance of my component.

来源：https://stackoverflow.com/questions/62624142/adding-element-to-array-via-uikit-modal-not-working-in-vuejs