VueJS：循环内的计算属性

Question

我的场景是图片的场景：

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

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

我还想显示会员之前已付款的月份。 我已通过以下方式设置它： 当名称（见图1）改变时调用一个方法：

async showMonths (idPerson) {
      try {
        const response = await this.$axios.$get(`/api/api.php/records/transactions?filter=idPerson,eq,${idPerson}&size=5`)
        this.lastMonths = response.records
          .map((item) => {
            return `${this.$moment(item.month, 'YYYY-MM').format('MMM YY')} - (${new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(item.Amount)})`
          })
          .join(' //  ')
      } catch (e) {
        this.lastMonths = e.message
      }
    }

这非常有效。这是一个异步函数，因为它总是直接从数据库中获取最新信息。

所以每次，如果成员发生变化（见数字 1），输出就会发生变化。

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

这是我打开对话框时的样子。

问题： 我可以在这里使用异步计算属性并作为参数，将editedItem.transactionId 传递给道具以检索数据吗？ 或者我可以将方法放在 data() - 函数中吗？我希望输出始终可见，而不仅仅是有人点击某个字段。

我创建了一个小代码笔来说明问题： https://codepen.io/rasenkantenstein/pen/qBdZepM

第一种形式（person.name）是没有意义的。但是，city 是等于图 1 的变量。结果应该打印为图 2（城市）的 :message 属性。

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

Answer 1

我已经更新了您的 codepen，它可以满足您的需求，请参阅 example。

基本上，您只需将消息设置在已创建或已安装的挂钩上：

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

上面要注意的关键是Vue.set的使用，因为当您直接设置带有索引的项目时，Vue无法检测到数组的更改，请参阅documentation。所以我建议你在changeCity 函数中也使用Vue.set。