英文:
v-data-table now displaying data or headers in Vue3 and Vite
问题
我明白了，这是您的Vue项目代码的一部分，您想要翻译其中的注释和文字内容。以下是翻译后的内容：
<div v-if="marketdata.asks">
<div>
<v-layout>
<v-flex md lg>
<v-card-title>卖单</v-card-title>
<v-data-table
dense
:sort-by="['price']"
:sort-desc="[true]"
disable-pagination
hide-default-footer
:headers="asksHeaders"
:items="marketdata.asks"
:items-per-page="5"
>
<template v-slot:header.price="{ header }">
<!-- {{ header.text.toUpperCase() }} -->
价格 ({{ wallets.rel.ticker }})
</template>
<template v-slot:header.maxvolume="{ header }">
<!-- {{ header.text.toUpperCase() }} -->
数量 ({{ wallets.base.ticker }})
</template>
<template v-slot:header.relamount="{ header }">
<!-- {{ header.text.toUpperCase() }} -->
总额 ({{ wallets.rel.ticker }})
</template>
<!-- 从 https://www.jacklmoore.com/notes/rounding-in-javascript/ 进行四舍五入 -->
<!-- 更好的方法是将其移到计算函数以提高可维护性和减少重复性 -->
<template v-slot:item.price="{ item }"> {{ Number(Math.round(item.price+'e8')+'e-8') }}</template>
<!-- 用于突出显示我的订单，TODO：在在AppTraderview中按价格分组之前，需要一个price:uuid数组 -->
<template v-slot:item.price2="{ item }">
{{ Number(Math.round(item.price+'e8')+'e-8') }}
<!-- 更好的实现在加载订单时由父组件处理，然后承诺设置标志 -->
<!-- <v-chip v-if="hasMyOrder(item.price)" color="purple" dark>我</v-chip> -->
<v-chip v-if="item.myOrder" x-small color="purple" dark>*</v-chip>
</template>
<template v-slot:item.maxvolume="{ item }">{{ Number(Math.round(item.maxvolume+'e8')+'e-8') }}</template>
<template v-slot:item.relamount="{ item }">{{ Number(Math.round(item.price*item.maxvolume+'e8')+'e-8') }}</template>
</v-data-table>
</v-flex>
</v-layout>
</div>
</div>
这是您代码中的部分内容的翻译。如果您需要更多翻译，请随时提出。
英文:
I am porting an old vue2 project to vue3 running on vite and using vuetify. I am trying to display my data table with values but it does not even show headers that supposedly static and defined in my script section.
<div v-if="marketdata.asks">
<div>
<v-layout>
<v-flex md lg>
<v-card-title>Asks</v-card-title>
<v-data-table
dense
:sort-by="['price']"
:sort-desc="[true]"
disable-pagination
hide-default-footer
:headers="asksHeaders"
:items="marketdata.asks"
:items-per-page="5"
>
<template v-slot:header.price="{ header }">
<!-- {{ header.text.toUpperCase() }} -->
Price ({{wallets.rel.ticker }})
</template>
<template v-slot:header.maxvolume="{ header }">
<!-- {{ header.text.toUpperCase() }} -->
Amount ({{wallets.base.ticker }})
</template>
<template v-slot:header.relamount="{ header }">
<!-- {{ header.text.toUpperCase() }} -->
Total ({{wallets.rel.ticker }})
</template>
<!-- Rounding from https://www.jacklmoore.com/notes/rounding-in-javascript/ -->
<!-- Better to move to computed function for maintainability/non-repetitive -->
<template v-slot:item.price="{ item }"> {{ Number(Math.round(item.price+'e8')+'e-8') }}</template>
<!-- For highlighting my orders, TODO need a price:uuid array before grouping by price in AppTraderview -->
<template v-slot:item.price2="{ item }">
{{ Number(Math.round(item.price+'e8')+'e-8') }}
<!--
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 }"
>{{ Number(Math.round(item.maxvolume+'e8')+'e-8') }}</template>
<template
v-slot:item.relamount="{ item }"
>{{ Number(Math.round(item.price*item.maxvolume+'e8')+'e-8') }}</template>
</v-data-table>
This is my script section with my headers defined, This is only part of my code both above and below
export default {
name: "MarketData",
props: ['wallets', 'marketdata', 'myOrdersThisMarket'],
data: function() {
return {
cexprice: "",
myOrders: "",
takerDialog: false,
makerDialog: false,
activeCoins: [],
walletBalance: { base: 0, rel: 0 },
trade: { base: "", rel: "", price: "", amount: "0" },
appName: "MarketData",
customerrors: [],
asksHeaders: [
{
text: "Price (rel)",
align: "left",
sortable: true,
value: "price"
},
{ text: "Amount (base)", align: "left", value: "maxvolume" },
{ text: "Total (rel))", align: "right", value: "relamount" }
],
bidsHeaders: [
{
text: "Price (rel)",
align: "left",
sortable: true,
value: "price"
},
{ text: "Base Amount", align: "left", value: "baseamount" },
{ text: "Can Cancel", align: "right", value: "maxvolume" }
]
}
},
答案1
得分: 2
谢谢提供链接，现在我明白了问题。似乎有两个问题：
- 你在
text属性中设置了列标题，但在Vuetify 3中，这已经更改为title。 - 同样，
header.<column name>插槽已被重命名为column.<column name>，所以v-slot:header.price现在应该是v-slot:column.price。
如果你更新这些名称，应该可以正常工作。
英文:
Thank you for the link, now I understand the issue. Seems to be two things:
- You are setting the column header title in the
textproperty, but in Vuetify 3, that was changed totitle. - Similarly, the
header.<column name>slots were renamed tocolumn.<column name>, sov-slot:header.pricenow isv-slot:column.price
If you update the names, it should work again.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论