ekrist1
421
5
Vue

Sort v-for list with calculated field

Posted 1 year ago by ekrist1

I have a v-for loop which runs a method to calculate a price for each vendor. Is there any ways to sort the list according to low-high prices using computed properties?

<div class="mt-4 mb-4 mr-3 border-2 border-grey p-4 bg-grey-lightest sm:w-full md:w-2/5" v-for="vendor in vendors" :key="vendor.id">
<h3{{ vendor.company }}</h3>
 <p class="text-darker">Agreementname: {{ vendor.agreement_type }}</p>
<p class="text-darker">Vendor price: {{ vendor.price }} kr</p>
<p class="text-darker">Fee: {{ vendor.fee }}</p>
<powercontact :vendordescription="vendor.description"></powercontact>
>div class="flex items-center bg-orange text-white text-sm font-bold px-4 py-3 mt-6" role="alert">
<p> Price per month {{ calculatePrice(vendor.fee, vendor.price, vendor.invoice) | roundCalculatedPrice }},-</p>
</div>
</div>

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.