Decimal numbers and localization leads to JavaScript NaN error

[dubst3pp4]

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 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:

{% load l10n %}

{% localize off %}
  <div class="reward-claim text-center" data-reward-id="{{ r.id }}" data-points="{{ r.point_value }}"></div>
{% endlocalize %}

Which now renders:

<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>

Remarks

Thank you very much for the excellent article and the cookiecutter setup! :+1: