Using computed value in v-for (Vue.js)

Question

I'm currently making bitcoin trading web app (personal project. Not a business one)

I have a bunch of cryptocurrencies prices from API, and showing it all by using v-for loop.

here's part of my code:

    <tbody class="text-sm">
      <tr v-for="coin in props.coins" :key="coin.code" class="hover:bg-zinc-600">
        <td class="p-1">
          <div class="font-semibold">{{ coin.name }}</div>
          <div class="text-xs text-gray-400">{{ coin.code }}</div>
        </td>
        <td
          class="text-right font-bold align-top p-1"
        >{{ Number(coin.trade_price).toLocaleString() }}</td>
        <td
          :class="{ 'text-blue-400': isNegative(coin.signed_change_rate), 'text-red-400': isPositive(coin.signed_change_rate) }"
          class="text-right p-1"
        >
          <div>{{ Number(coin.signed_change_rate).toFixed(2) }}%</div>
          <div class="text-xs">{{ coin.signed_change_price }}</div>
        </td>
        <td class="text-right align-top p-1">{{ convertTp24h(coin.acc_trade_price_24h) }}</td>
        <td class="text-right p-1">
          <button class="bg-red-700 rounded-lg hover:bg-red-600 p-1">매수</button>
        </td>
      </tr>
    </tbody>

As you can see I have many methods and expressions that converts raw value from API to human-readables.

I'm wondering if this is a bad practice. I heard that methods are called everytime so, rather use computed().

But as you can see I have my values from API in Object(props.coins) and I'm looping this object in v-for. Can I still use computed() methods to convert a value inside an Object that is also looped by v-for?

Bergur · Accepted Answer · 2021-12-18 00:27:26Z

You can't use computed for items in a loop, since they don't take in arguments. Computed is used for .. computed properties and methods take in arguments e.g. formatChangeRate()

You are right that methods are called everytime, but that's totally fine and normal practice.

So creating a component with methods like formatChangeRate, formatTradePrice is totally fine.

There are ways to make it work with computed properties but in my opinion its not worth it.

1) You coould make another component that takes in the item as a prop, uses computed property and displays it in componenent's template but that's a total overhead.

2) You could map the array and reference it by index. Something like:

computed: {
  changeRate() {
    this.coins.map(coin => {
      return Number(coin.signed_change_rate).toFixed(2) + '%'
    })
  }
}

Now changeRate is an array of formatted change rates so you could in your v-for do something like

v-for="(coin, index) in coins)">
<td>changeRate[index]</td>

So now you're looping through the array multiple times, and the code is less testable and less readable.

In my opinion using methods is totally fine and the right way to go in this example. The performance of calling a simple formatting method multiple times is negligible.

Also the cache you're refering to is that computed properties are cached based on their reactive dependency. E.g. you have in your data, firstName and lastName. You could then make a computed property called fullName that concats those two. The caching would work so that fullName doesn't change unless firstName or lastName changes.

Since you're looping through an array the value that would be computed is always changing.

jeremy castelli · Accepted Answer · 2021-12-18 00:24:29Z

1

you are right, methods are called everytime and in theory thats not really good, but in practice if your method just concat strings or other simple operations, that's really not a big deal. Your computer can do millions of operations like that per seconds.

In the other hand if you do complex operations then the solution is to precalculate before. After you receive your data construct an Array looking something like bellow and use this one in your template

(pseudo code)
[{
    name,
    code,
    changeRate: Number(signed_change_rate).toFixed(2),
    ...
},
...
]

answered Dec 18, 2021 at 0:24

jeremy castelli

1,26011 silver badges27 bronze badges

Collectives™ on Stack Overflow

Using computed value in v-for (Vue.js)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related