VueJS：循环内的计算属性

Posted 2023-02-23

【中文标题】VueJS：循环内的计算属性

【英文标题】：VueJS: Computed Property inside a loop

【发布时间】：2021-03-01 23:57:30

【问题描述】：

我的场景是图片的场景：

我有一些交易标头和交易详情。屏幕截图是用于编辑交易的弹出对话框... 一项交易可能是会员运费。如果会员支付了费用（见 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 时 - 我可以填充这两个详细信息吗？

【问题讨论】：

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

嗨，丹。我不确定在哪里放置触发器以调用正确的细节位置。位置取决于 v-for 循环中的项目。

听起来你只需要在对话框的created 钩子中调用showMonths，使用第一个ID。否则，我建议创建一个最小可重现的问题示例。此处显示的唯一代码是 showMonths 方法。

我添加了一个带有 codepen 示例的段落。

【参考方案1】：

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

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

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

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

【讨论】：

谢谢你，这是一个样板。还有一个困难需要克服。我想联系数据库以检索真实场景的消息。这也是可能的：created: async function () await all.Promise(this.people.forEach( async (item, i) => const resMessage = await this.axios.get('...') Vue.set(this.message, i, item.country) ))