通过 UIKit 模式向数组添加元素在 vuejs 中不起作用答案

【问题标题】：Adding element to array via UIKit modal not working in vuejs通过 UIKit 模式向数组添加元素在 vuejs 中不起作用
【发布时间】：2020-10-18 18:58:52
【问题描述】：

我的页面上有一个显示“货币”对象数组的表格：

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

当点击对话框上的“保存”按钮时，对话框关闭并在父级上调用以下方法：

  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 重置为默认的新对象。

以下是代码（错误）的行为方式：

我添加了名为“a”的元素。我收到 currencies 未定义并已创建的消息。然后将对象“a”推送到数组中。 不显示在表格中。
我添加了元素“b”。我再次收到货币未定义的消息（如果我在那里设置断点，我发现它确实未定义。currencies 然后被初始化并添加对象“b”。它显示在我的表中。
我添加了元素“c”。我的addCurrency 方法现在告诉我currencies 是一个包含一个对象的数组 - “a”。然后添加对象“c”，结果数组包含两个对象 - “a”和“c”。但是该表仍然只显示对象“b”。
我添加了元素“d”。我的数组现在包含“a”、“c”和“d”。该表格仍然只显示“b”。

无论我添加多少对象，addCurrency 使用的数组都会省略第二个元素 ("a","c","d","e","f","g"," h"...) 并且表格将只显示第二个元素。这种行为虽然很奇怪，但却是一致的——无论我运行多少次实验，它的行为都是一样的。

可能会发生什么？

【问题讨论】：

标签： javascript arrays vue.js getuikit

【解决方案1】：

好的，我知道发生了什么。父组件（我要添加表格的那个）也是一个编辑器组件，可以在两种情况下触发 - 添加新项目和编辑现有项目。事实证明，我的前任为这两个用例使用了组件的两个不同实例。无论出于何种原因，“b”的addCurrency 函数在我调用弹出窗口的实例上被命中，而所有其他元素都被发送到另一个实例。

当我意识到这是我为组件的每个实例分配唯一键时，我尝试的第一件事。这没有帮助。我会四处搜索解决方案，如果找不到，我会尝试重新编写代码以仅使用我的组件的一个实例。

【讨论】：