VueJS：在循环内计算 属性
VueJS: Computed Property inside a loop
我的场景是图片：
我有一些交易 headers 和交易详情。屏幕截图是用于编辑交易的 pop-up 对话框...
一笔交易可能是会员费。如果会员支付费用（见 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 传递给 prop 以检索数据吗？
或者我可以将方法放在数据 () - 函数中吗？我希望输出始终可见，而不仅仅是有人单击某个字段时才可见。
我创建了一个小代码笔来说明这个问题：
https://codepen.io/rasenkantenstein/pen/qBdZepM
第一种形式（person.name）没有意义。但是，城市是等于图 1 的变量。结果应该打印为图 2（城市）的 :message 属性。
加载 codepen 时如何填充这两个详细信息？
我已经更新了您的代码笔，它可以满足您的需求，请参阅 example。
本质上，您只需在已创建或已安装的挂钩上设置您的消息：
created: function () {
this.people.forEach((item, i) => {
Vue.set(this.message, i, item.country)
})
}
上面要注意的关键是 Vue.set 的使用，因为当你直接用索引设置一个项目时，Vue 无法检测到数组的更改，请参阅围绕此的 documentation。所以我建议您在 changeCity 函数中也使用 Vue.set。
我的场景是图片：
我有一些交易 headers 和交易详情。屏幕截图是用于编辑交易的 pop-up 对话框... 一笔交易可能是会员费。如果会员支付费用（见 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 传递给 prop 以检索数据吗？ 或者我可以将方法放在数据 () - 函数中吗？我希望输出始终可见，而不仅仅是有人单击某个字段时才可见。
我创建了一个小代码笔来说明这个问题： https://codepen.io/rasenkantenstein/pen/qBdZepM
第一种形式（person.name）没有意义。但是，城市是等于图 1 的变量。结果应该打印为图 2（城市）的 :message 属性。
加载 codepen 时如何填充这两个详细信息？
我已经更新了您的代码笔，它可以满足您的需求，请参阅 example。
本质上，您只需在已创建或已安装的挂钩上设置您的消息：
created: function () {
this.people.forEach((item, i) => {
Vue.set(this.message, i, item.country)
})
}
上面要注意的关键是 Vue.set 的使用，因为当你直接用索引设置一个项目时，Vue 无法检测到数组的更改，请参阅围绕此的 documentation。所以我建议您在 changeCity 函数中也使用 Vue.set。