通过UIKit模式向数组添加元素在Vue.js中不起作用 [英] Adding element to array via UIKit modal not working in vuejs

问题描述

我的页面上有一个表格，其中显示了一个 currency数组。对象：

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>
...

我有一个 +

<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);
      },

控制台日志仅用于调试目的。首先，该函数检查 this.currencies 是否未定义，因为在开始时可能是未定义的。如果未定义，则将其设置为空数组。然后，它将元素（ newCurrency 对象）推送到数组，并将 newCurrency 重置为默认的新对象。

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.

代码的行为如下：

1. 我添加了名称为 a的元素。我收到消息，货币未定义并创建。对象 a表示对象。然后将其推到阵列。 它未显示在表中。


2. 我添加了元素 b。我再次收到货币未定义的消息（如果在该处放置一个断点，我会发现它确实是未定义的。 currencies 然后被初始化，对象 b为它显示在我的表中。


3. 我添加元素 c。我的 addCurrency 现在的方法告诉我 currencies 是一个带有一个对象的数组- a。然后添加对象 c，并且所得数组包含两个对象-但是，该表仍仅显示对象 b。


4. 我添加元素 d。我的数组现在包含 a， a和 c。

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".

无论我添加了多少个对象，该数组所使用的数组都将显示为 b。 addCurrency 将省略第二个元素（ a， c， d， e， f， g）。 ， h ...）和表格将仅显示第二个元素。这种行为虽然很奇怪，但却是一致的-无论我进行多少次实验，它的行为都一样。

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.

可能会发生什么？

推荐答案

好的，我知道发生了什么事。父组件（我要向其中添加表格的组件）也是一个编辑器组件，可以在两种情况下触发-添加新项和编辑现有项。事实证明，我的前任在这两个用例中使用了组件的两个不同实例。并且无论出于何种原因， b函数的 addCurrency 函数

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.

这篇关于通过UIKit模式向数组添加元素在Vue.js中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！