-
-
Notifications
You must be signed in to change notification settings - Fork 377
Closed
Labels
Type: BugBug or Bug fixesBug or Bug fixes
Description
Reporting a bug?
I'm using this example to apply custom formatting for currency value.
<script setup>
import { computed } from 'vue'
const props = defineProps({
amount: {
type: [String, Number],
default: 0,
},
})
const amountFloat = computed(() => parseFloat(props.amount) / 100)
</script>
<template lang="pug">
i18n-n(:value='amountFloat', format='currency')
template(#currency='slotProps')
.text-h6 {{ slotProps.currency }}
template(#group='slotProps')
.text-subtitle1.self-end {{ slotProps.group }}
template(#integer='slotProps')
.text-h3 {{ slotProps.integer }}
template(#decimal='slotProps')
.text-subtitle1 {{ slotProps.decimal }}
template(#fraction='slotProps')
.text-subtitle1 {{ slotProps.fraction }}
</template>
It renders the integer part ok on initial render when the amountFloat is => 1000, but if component gets updated with some bigger number, the second integer part will not uses the #integer slot's class, but it rather uses the class of #fraction slot.
Expected behavior
All integer sections uses the classes defined within the integer slot.
Reproduction
https://codesandbox.io/s/youthful-grothendieck-99wfxv?file=/src/components/FormattedPrice.vue
Just use input to change formatted value.
System Info
System:
OS: macOS 12.2.1
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 4.36 GB / 32.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.6.1 - ~/.nvm/versions/node/v16.6.1/bin/node
Yarn: 1.22.18 - ~/.yarn/bin/yarn
npm: 7.20.5 - ~/.nvm/versions/node/v16.6.1/bin/npm
Browsers:
Chrome: 100.0.4896.60
Safari: 15.3
Screenshot
No response
Additional context
No response
Validations
- Read the Contributing Guidelines
- Read the Documentation
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion
- The provided reproduction is a minimal reproducible example of the bug.
Metadata
Metadata
Assignees
Labels
Type: BugBug or Bug fixesBug or Bug fixes