英文:
Unable to round of vdatatable values to 8 decimal places in VUE3
问题
computed: {
roundedPrice() {
return (price) => {
return Number((Math.round(price * 1e8) / 1e8).toFixed(8));
};
}
},
英文:
I am porting an old vue2 project to vue3 the project used Math.round function to round off current market data, i.e bids and asks to 8 decimal places. The function works fine with the old version however in the newer version it does not work and I get very long decimal values. I have tried something like this but it does not work.
<template v-slot:item.price="{ item }">
{{ roundedPrice(item.price) }}
</template>
<template v-slot:item.price2="{ item }">
{{ roundedPrice(item.price) }}
<!-- Remaining code -->
<!--
better implementation handled in parent component on load of orders, then promise to set flag
<v-chip v-if="hasMyOrder(item.price)" color="purple" dark>me</v-chip>
-->
<v-chip v-if="item.myOrder" x-small color="purple" dark>*</v-chip>
</template>
<template v-slot:item.maxvolume="{ item }">
{{ roundedPrice(item.maxvolume) }}
</template>
<template v-slot:item.relamount="{ item }">
{{ roundedPrice(item.price * item.maxvolume) }}
</template>
The following is my roundedPrice method defined in my script:
computed: {
roundedPrice() {
return (price) => {
return Number((Math.round(price * 1e8) / 1e8).toFixed(8));
};
}
},
You can checkout the live project here and see the AtomicDexOrderbook component which is the VDATABLE with market orders against the pair. The headings are a bit messed up as well.
http://v3dev.komodefi.com:17077/traderview/RICK/MORTY
This is my complete code:
答案1
得分: 2
v-data-table的插槽语法已经发生了变化。实际上，Vuetify 2和Vuetify 3之间发生了很多变化。每当您在升级过程中遇到问题时，都应仔细查看Vuetify 3文档。假设没有任何内容相同，并始终确认您的旧Vuetify 2代码的语法是否仍然有文档，或者在Vuetify 3中是否发生了更改。
您的价格列的新插槽语法应该如下所示：
<template v-slot:item.price="{ item }">
{{ roundedPrice(item.columns.price) }}
</template>
所有使用item.columnName的插槽都应替换为item.columns.columnName。
计算属性本身没有问题。Math对象是纯JavaScript，因此与Vue或Vuetify无关的计算。
英文:
The syntax for v-data-table slots has changed. A lot has changed between Vuetify 2 and Vuetify 3 actually. You will want to thoroughly review the Vuetify 3 documentation any time you have an issue with the upgrade process. Assume nothing is the same and always confirm whether the syntax of your old Vuetify 2 code is still documented, or if it has changed in Vuetify 3.
The new slot syntax for your price column should be like this:
<template v-slot:item.price="{ item }">
{{ roundedPrice(item.columns.price) }}
</template>
All of your slots that use item.columnName should be replaced with item.columns.columnName
The computed property itself is fine. The Math object is vanilla JavaScript, so nothing Vue or Vuetify related could affect it's calculation.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论