V-select not being able to support bigints

Question

When clicking in a select that lists items with really big integers as 738883988997898200, the select options hang in the screen and we can't proceed.

We can't proceed because we are inside a v-form that's validating that field, which doesn't have a value. This is happening because the v-select is not able to v-model the bigint.

Does anyone faced this before? and have a tip on how to deal with it ?

Bellow we have both of the errors that it console logged in the screen as Errors

[Vue warn]: Error in render: "TypeError: BigInt value can't be serialized in JSON"

found in

---> <VSelect>
       <VForm>
         <CampaignForm> at src/components/publisherCampaign/campaignForm.vue
           <VCard>
             <VTabItem>
               <VTabsItems>
                 <VCard>
                   <PublisherCampaignAdd> at src/views/publisherCampaign/PublisherCampaignAdd.vue
                     <PublisherCampaign> at src/views/publisherCampaign/PublisherCampaign.vue
                       <Publisher> at src/views/publisher/Publisher.vue
                         <VMain>
                           <VApp>
                             <App> at src/App.vue
                               <Root> vue.runtime.esm.js:619

TypeError: BigInt value can't be serialized in JSON
    genCommaSelection VSelect.ts:390
    genSelections VSelect.ts:552
    genDefaultSlot VSelect.ts:394
    genInputSlot VInput.ts:217
    genInputSlot VTextField.ts:291
    genInputSlot VSelect.ts:475
    genControl VInput.ts:155
    genControl VTextField.ts:332
    genContent VInput.ts:148
    render VInput.ts:314
    render vue-composition-api.esm.js:1817
    activateCurrentInstance vue-composition-api.esm.js:1772
    render vue-composition-api.esm.js:1816
    VueJS 14
    validate index.ts:263
    VueJS 5
    internalValue index.ts:185
    VueJS 12
    set VTextField.ts:149
    setValue VSelect.ts:878
    selectItem VSelect.ts:824
    VueJS 4
    click VSelectList.ts:170
    VueJS 4
vue.runtime.esm.js:1897

Answer 1

One workaround is to convert the v-select's items to strings before binding it. You could use Array.prototype.map with the String constructor as the argument:

<script>
export default {
  data: {
    return {
      items: [
        BigInt(10e10),
        BigInt(738883988997898200),
      ].map(String), 👈 // convert items to strings
    }
  },
}
</script>

<template>
  <v-select :items="items"></v-select>
</template>

demo