Лучший способ интеграции BigNumber.js во Vue проект?

Question

[Никита Павлюк]

Как можно реализовать интеграцию BigNumber.js в проект для использования в формах?

Вариант 1: Можно использовать computed геттеры и сеттеры, где в сеттерах оборачивать в value в BigNumber -

// emplate
<input v-model="fieldValue" />
// computed
fieldValue: {
   get() { return this.form.count.toString() },
   set(v) { this.form.count = new BigNumber(v) }
}

Минус первого варианта в том, что под каждое поле нужно делать computed свойство с геттерами и сеттерами.

Вариант 2 Компонент обертка, который бы инкапсулировал конвертацию обычного числового типа в bigNubmer и наоборот. Минус: Необходимость дублировать всю внутреннюю логику компонента, но для bigNumber чисел. + Конкретно в моем случае я использую сторонний компонент

Вариант 3 Использовать @change событие и :value атрибут у компонента input вместо v-model. Т.е. в обработчике change оборачивать введенное число в BigNumber и в value получать его значение. минус: не используем v-model, что, как по мне, куда лаконичнее

Какие еще решения можете предложить? Заранее спасибо!

ссылка на либу https://github.com/MikeMcl/bignumber.js

Answer 1

[Aetae]

1+2. Копмонент-обёртка, использующая метод с геттером-сеттером. Никакую логику переписывать не надо.)

Comments

[Никита Павлюк]

Aetae использую v-text-field для полей. Как прокидывать слот в обертку и дальше в v-text-field?

<template>
  <v-text-field
    v-model="value2"
    v-bind="$attrs"
  >
    <template v-if="what??" #append>
      <span class="mt-1 text--accent-base">%</span>
    </template>
  </v-text-field>
</template>

[Никита Павлюк]

Aetae А если написать свою директиву? или модификатор? для любого компонента.

[Aetae]

Никита Павлюк, слоты прокидываются примерно так:

<template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
  <slot :name="slot" v-bind="scope"/>
</template>

Но рендер функцией было бы симпатичнее.