V-select 无法支持 bigints

Question

当单击 select 时，它列出了具有非常大整数的项目 738883988997898200，select 选项挂在屏幕上，我们无法继续。

我们无法继续，因为我们在验证该字段的 v 表单中，该字段没有值。发生这种情况是因为 v-select 无法对 bigint 进行 v 建模。

有人遇到过这个问题吗？并知道如何处理它？

下面我们有两个错误，它控制台在屏幕上记录为错误

[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

一种解决方法是在绑定之前将 v-select 的项目转换为字符串。您可以将 Array.prototype.map 与 String 构造函数一起用作参数：

<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

V-select 无法支持 bigints

V-select not being able to support bigints

typeerror

bigint

vue.js

vuetify.js

v-select