When using Django with a non-English localization, the Decimal values passed from Django to the Vue components are converted to localized values in the Django template, eg. the property points has a value of 2,75 instead of 2.75. This leads to NaN values in JavaScript.
Rendered list.html template:
<div class="reward-claim text-center" data-reward-id="1" data-points="2,75" data-v-app=""><div><a class="btn btn-light">Redeem this Reward</a></div></div>
Possible Solution
Disable localization for Vue components in list.html template:
What happened?
When using Django with a non-English localization, the
Decimal
values passed from Django to the Vue components are converted to localized values in the Django template, eg. the propertypoints
has a value of2,75
instead of2.75
. This leads toNaN
values in JavaScript.Rendered
list.html
template:Possible Solution
Disable localization for Vue components in
list.html
template:Which now renders:
Remarks
Thank you very much for the excellent article and the cookiecutter setup! :+1: