Vue.js VueJS：循环内的计算属性

我的设想是这样的：

我有一些交易标题和交易细节。屏幕截图是一个用于编辑事务的弹出对话框。。。 一笔交易可以是会员船费。如果会员支付费用（见1），那么我希望能够输入与费用相关的月份。 每个“Buchungsvorgang”（交易详情）都通过v-for循环：

<v-row
                        v-for="(item, index) in editedItem.transactionDetail"
                        :key="index"
                        dense
                        align="center"
                        class="mb-2"
                      >

这很好用。它是一个异步函数，因为它总是直接从数据库中获取最新信息

因此，每次，如果一个用户更改了成员（请参见编号1），输出都会更改

我的问题是：只有当有人触发表单的更改事件时，它才会更改。如果我打开对话框，第二个将是空的，因为没有人首先触发事件

这是我打开对话框时的外观

问题: 我是否可以在此处使用async computed属性，并将editem.transactionId作为参数传递给prop以检索数据？ 或者我可以将该方法放在data（）函数中吗？我希望输出始终可见，而不仅仅是有人单击某个字段时

我创建了一个小代码笔来说明问题：

第一种形式（person.name）没有意义。然而，城市是与图1相同的变量。结果应打印为图2（城市）的：message属性

---

如何-加载代码笔时-我可以填充这两个详细信息吗？

我已经更新了您的代码笔，可以满足您的需要，请参阅

基本上，您只需在创建的或装入的钩子上设置消息：

  created: function () {
    this.people.forEach((item, i) => {
      Vue.set(this.message, i, item.country)
    })
  }

---

上面需要注意的关键问题是使用

Vue.set

，因为当您直接使用索引设置项时，Vue无法检测到对数组的更改，请参见相关内容。因此，我建议您在

changeCity

函数中也使用

Vue.set

。

为什么在加载对话框时不能手动调用

showMonths

。我不知道该把触发器放在什么地方，以使它能够调用正确的细节位置。位置取决于v-for循环中的项目。在我看来，您只需要使用第一个id在对话框的

created

钩子中调用

showMonths

。否则，我建议创建一个问题的最小可复制示例。这里显示的唯一代码是

showMonths

方法。我添加了一个带有codepen示例的段落。谢谢，这是一个样板。还有一个困难需要克服。我想通过数据库检索真实场景中的消息。这也是可能的：

created:async函数（）{wait all.Promise（this.people.forEach（async（item，i）=>{const resMessage=wait this.axios.get（'.'）Vue.set（this.message，i，item.country）}

  created: function () {
    this.people.forEach((item, i) => {
      Vue.set(this.message, i, item.country)
    })
  }