VueJS: Computed Property inside a loop

Question

My scenario is that of the picture:

I have some transaction headers and transaction details. The screenshot is a pop-up dialog for editing a transaction... One transaction could be a member ship fee. If a member pays a fee (see 1) then I want to be able to enter the month related to the fee. Each "Buchungsvorgang" (transaction detail) is being looped through with v-for:

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

I also want to show the months for which a member has already paid previously. I have set it by: When the name (see figure 1) is changed call a method:

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

This works perfectly. It's an async function as it always picks up the latest info directly from the database.

So each time, if a change the member (see number 1), the output changes.

My problem: It only changes when someone triggers the change event of the form. If I open the dialog, number two would be empty because no one triggered the event in the first place.

This is the way it looks when I open the dialog.

Question: Can I use a async computed property here and as a parameter, pass the editedItem.transactionId to the prop in order to retrieve the data? Or can I put the method inside the data () - function? I want the output to be visible all the time, not just if someone clicks on a field.

I have created to small codepen to illustrate the problem: https://codepen.io/rasenkantenstein/pen/qBdZepM

The first form (person.name) is meaningless. However, the city is the variable equal to figure 1. The result should be printed as the :message property of figure 2 (city).

How - when loading the codepen - can I populate both details?

Why can't you manually call showMonths when the dialog loads? — Dan
– Dan, Commented Nov 18, 2020 at 19:00
Hi Dan. I am not sure where to put the trigger in a way that it calls the proper detail position. The position depends on the item inside the v-for loop. — rasenkantenstein
– rasenkantenstein, Commented Nov 18, 2020 at 19:13
It sounds to me like you only need to call showMonths in the created hook of the dialog, using the first id. Otherwise, I suggest creating a minimal reproducible example of the problem. The only code shown here is the showMonths method. — Dan
– Dan, Commented Nov 18, 2020 at 19:21

tony19 · Accepted Answer · 2022-07-16 00:51:34Z

1

I've updated your codepen that does what I think you want, see example.

Essentially, you just set your messages on either created or mounted hooks:

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

The key thing to note above is the use of Vue.set, since Vue cannot detect changes to an array when you directly set an item with the index, see the documentation around this. So I recommend you use Vue.set inside your changeCity function as well.

edited Jul 16, 2022 at 0:51

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 18, 2020 at 22:28

Beyers

9,11847 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rasenkantenstein Over a year ago

THank you, that worked as a boilerplate. There was one more difficulty to overcome. I wanted to reach out for the database to retrieve the message for the real scenario. That was also possible:

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)     }))   }

Collectives™ on Stack Overflow

VueJS: Computed Property inside a loop

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related