v-data-table now displaying data or headers in Vue3 and Vite

Question

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" }
      ]
    }
  },

Have you included the labs components? No VDataTable without it at the moment — Moritz Ringler
– Moritz Ringler, Commented Jun 12, 2023 at 6:50
I did the following it does display the data now but not the columns and headings though: import { VDataTable } from 'vuetify/labs/VDataTable' export default { name: "MarketData", props: ['wallets', 'marketdata', 'myOrdersThisMarket'], components: { VDataTable }, — artistAhmed
– artistAhmed, Commented Jun 12, 2023 at 22:55
If you don't see headers and columns, what data is left to see? Can you provide a playground example? — Moritz Ringler
– Moritz Ringler, Commented Jun 13, 2023 at 8:09
Hard to make a playground however here is the project link itself: v3dev.komodefi.com:17077/traderview/RICK/MORTY The component is AtomicDex OrderBook which is in question here — artistAhmed
– artistAhmed, Commented Jun 13, 2023 at 13:18

Moritz Ringler · Accepted Answer · 2023-06-13 14:07:30Z

3

Thank you for the link, now I understand the issue. Seems to be two things:

You are setting the column header title in the text property, but in Vuetify 3, that was changed to title.
Similarly, the header.<column name> slots were renamed to column.<column name>, so v-slot:header.price now is v-slot:column.price

If you update the names, it should work again.

answered Jun 13, 2023 at 14:07

Moritz Ringler

16.4k10 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

artistAhmed Over a year ago

Thanks mate works perfect now, any tips to disable pagination and enable horizontal scroll ? much appreciated.

Moritz Ringler Over a year ago

I think you have to set :items-per-page to -1 to show all items on the same page. Then you can remove the pagination by setting an empty footer slot. Horizontal scroll should get activated when you limit the height of the component. Does that work?

artistAhmed Over a year ago

It does not work unfortunately

Collectives™ on Stack Overflow

v-data-table now displaying data or headers in Vue3 and Vite

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related