Description
Love the component, but I discovered an issue with precision that is quite baffling. In short, the precision attribute that is set in one instance of the component is somehow impacting the precision in another instance of the component when the model is updated. Consider the following code. In it, I have two vue-number components that show the correct data when rendered. When the button is pressed and the model is updated, the re-rendered values do NOT show the expected values. More info below:
<template>
<vue-number v-model="current_record['price1']" v-bind="options" :minimum-fraction-digits=4 :precision=4 /> {{current_record['price1']}}<br/>
<vue-number v-model="current_record['price2']" v-bind="options" :minimum-fraction-digits=1 :precision=1 /> {{current_record['price2']}}<br/>
<button @click="() => {current_record = {'price1': 34.567, 'price2': 34.567}}">Change</button><br/>
</template>
<script setup>
import {ref} from "vue";
import { component as VueNumber } from '@coders-tm/vue-number-format'
const options = ref({
decimal: '.',
separator: ',',
prefix: '',
masked: false
})
const current_record = ref( {'price1': 12.345, 'price2': 12.345})
</script>
On first render, the values correctly show:
input1: 12.3450
input2: 12.3
When the button is pressed, the values are then incorrectly set to:
input1: 34.6000
input2: 34.6
The expected values are:
input1: 34.5670
input2: 34.6
From trial and error, it appears as though the precision setting being used during re-rendering is always the last one set on the page. My page has lots of vue-number components, and when I update the model to which they are attached, all precision values are set to the value on the last vue-number component. Curiously, the minimum-fraction-digits work fine, it just appears to be the precision attribute that is not behaving.
This is quite baffling to me and I didn't think that it was possible, but I am able to see it consistently in my app. Any assistance would be appreciated.