How to call a method only once in v-for iteration in Vue?

Question

I have a situation where a "v-for" calls, for each iteration, 2 methods. They are called when user press a button.

Users tell to the component the number (itemsDrawn property) of iterations that the v-for will operate.

"itemsDrawn" property can vary from 0 to 4. v-for draws bootstrap cards in each iteration (can be 0 to 4)

These methods (method A and B) return an integer/code or a string (I can decide) and inside the template I need to display some message based on code (type of data) provided for each function.

So, based on theses codes I can select which text I will display in the UI.

The code snipped is like so:

<div
  class="card text-center mt-5"
  style="width: 18rem"
  v-for="(item, index) in itemsDrawn"
  :key="index"
>
  <div class="card-header">Item: {{ item }} - {{ methodA() }}</div>
  <div class="card-body">
    <h5 class="card-title">{{ methodB() }}</h5>
    <p class="card-text">
      'This is the message based on both methodA() and methodB()'
      'I NEED TO CALL A METHOD HERE 
    </p>
  </div>
</div>

Methods

  methods: {
    methodA(){
      return this.workItemsTypes[this.randomNumber(0,9)];
    },
    methodB() {
      return this.classesOfServices[this.randomNumber(0,7)];
    },
  },

The output is like so:

Look at the first column of the output, "Melhoria" in the card header and "Padrão" in the card body should display a personalized message; the same occurs for each card.

If I call these methods inside p-card-text they will give me others values. Thus, this would be 4 calls, 2 for each method.

So, how can I call them only once, hold their outputs and show a message based on their data?

How to keep these 2 values in each method called and use them later?

A quick rule-of-thumb for Vue... don't use methods to render parts of your template. Use computed properties instead. See [Method vs Computed in Vue](https://stackoverflow.com/questions/44350862/method-vs-computed-in-vue) — Phil, Apr 18 '21 at 23:17
What do you mean by _"based on the user action"_. Your pseudo-code template example does not convey what it is you're trying to do. Do you think you could improve it to make it clearer? — Phil, Apr 18 '21 at 23:20
Store the random value in the `data` state, don't use randomness in the rendering. — Bergi, Apr 19 '21 at 02:18

Olavo Alexandrino · Answer 1 · 2021-04-19T15:16:23.630

I am not sure if this is the best design, but based on the comments I could find the answer.

Both classOfServiceItem and workItemTypeItem are the state vars where I am saving the data before retrieving by the correspondent data arrays.

save the random number in the state

  state: {
    classOfServiceItem: 0,
    workItemTypeItem: 0,
  },
  methods: {
    classOfService() {
      // here I save the state
      this.classOfServiceItem = this.randomNumber(0, 7);
      return this.classesOfServices[this.classOfServiceItem];
    },
    workItemType() {
      // here I save the state
      this.workItemTypeItem  = this.randomNumber(0, 0);
      return this.workItemsTypes[this.workItemTypeItem];
    },


  },

use the state for each iteration

 
        <div class="card-body mycard-body">
          <h5 class="card-title">{{ classOfService() }}</h5>
          <p class="card-text">
            'Here I use the random    
            'This is the message based on both 
{{ classesOfServices[classOfServiceItem]  }} and 
{{ workItemsTypes[workItemTypeItem] }}'
          </p>
          <button type="button" @click="pullItem" class="btn btn-primary">
            Puxar
          </button>
        </div>

How to call a method only once in v-for iteration in Vue?

1 Answers1