0

I'm on a bigger project (warehouse management system), it's cloudbased and we host everything with Azure. We are currently using Vue 2 (2.6.8) and vuetify (2.1.11) which we will upgrade within time. We can not post code here (company policy), but I'm going to try to explain what the problem is.

We are using v-data-table to show data returned from the database. This works as intended when you have something returned, but if no search is done or no data is returned this happens (see image). It replaces the hyphen (-) with three �. The strangest thing is that it only happens in QA, Test, and Production environment. Locally everything looks normal and works fine.

enter image description here

From what I can tell every environment is set up with UTF-8 (meta charset="utf-8") and also the database is configured for UTF-8.

What we noticed was that these two google font addresses seem to be different now (generates different addresses if you look them up in google fonts), but we updated it and there was no change in behaviour, so the problem persists.

This is the old addresses

enter image description here

Everything else works perfectly, and from what I can tell, it's only when the v-data-table is empty that this occurs. No other problems with fonts, UTF-8 encoding or anything like that.

We use Typescript, C#, Microsoft SQL

I've tried to run in different browser, updated the google api addresses, checked the the charset so it's set to utf-8. I'm a junior developer and have worked for 1 year, mostly front end. Don't know what to check next.

Edit:

We override items per page in a file called tableSettings.ts

export const ItemsPerPageOptions: number[] = [10, 25, 50, 100];

in SearchFile:

public get footerProps(): {} { 
  return { "items-per-page-options": ItemsPerPageOptions }; 
}

and in vue file we pass it to v-data table like so:

<v-data-table 
  :items="packageTypeBalances" 
  :headers="headers" 
  :loading="loading" 
  :footer-props="footerProps" 
  :search="search" 
  :custom-filter="searchFilter" >
</v-data-table>
yoduh
  • 7,074
  • 2
  • 11
  • 21
Potatismoose
  • 1
  • 1
  • Did you override the [#footer.page-text](https://v2.vuetifyjs.com/en/api/v-data-table/#slots-footer.page-text) slot? Looking at [the code](https://github.com/vuetifyjs/vuetify/blob/2127ff1fb332700f4e1a2e4a41843162217f5bb3/packages/vuetify/src/components/VDataIterator/VDataFooter.ts#L133), the only other place that could introduce utf-8 errors seems to be the localized text from `$vuetify.dataFooter.pageText`, but that would show up with non-empty rows as well. – Moritz Ringler Aug 15 '23 at 12:01
  • We override items per page in a file called tableSettings.ts export const ItemsPerPageOptions: number[] = [10, 25, 50, 100]; in SearchFile: public get footerProps(): {} { return { "items-per-page-options": ItemsPerPageOptions }; } and in vue file we pass it to v-data table like so: – Potatismoose Aug 15 '23 at 12:57

0 Answers0