Как показать данные из js в html в django:TemplateSyntaxError at /payment Could not parse the remainder: '[$index]' from 'cardNumber[$index]'

Я создаю страницу оплаты картой, где есть карта и текстовое поле, когда я набираю текст в текстовом поле, он должен отображаться на карте, но я использую {{n < 10 ? '0' + n : n}} ,{{$index + minCardYear}} в HTML, чтобы получить число на карте с анимацией.

enter image description here

<div class="card-form__col">
                <div class="card-form__group">
                  <label for="cardMonth" class="card-input__label">Expiration Date</label>
                  <select class="card-input__input -select" id="cardMonth" v-model="cardMonth" v-on:focus="focusInput" v-on:blur="blurInput" data-ref="cardDate">
                    <option value="" disabled selected>Month</option>
                    <option v-bind:value="n < 10 ? '0' + n : n" v-for="n in 12" v-bind:disabled="n < minCardMonth" v-bind:key="n">
                        {{n < 10 ? '0' + n : n}}   
                    </option>
                  </select>
                  <select class="card-input__input -select" id="cardYear" v-model="cardYear" v-on:focus="focusInput" v-on:blur="blurInput" data-ref="cardDate">
                    <option value="" disabled selected>Year</option>
                    <option v-bind:value="$index + minCardYear" v-for="(n, $index) in 12" v-bind:key="n">
                          {{$index + minCardYear}}
                    </option>
                  </select>
                </div>
              </div>

Django выдает мне ошибку:

Ошибка шаблона синтаксиса в /payment Не удалось разобрать остаток: '[$index]' из 'cardNumber[$index]'

Как я могу решить это так, чтобы Django игнорировал эти части, а js должен читать это.

Я не знаком с Vue.js, но знаю, что их теги шаблонов такие же {{ }}, как и язык шаблонов Django, но я полагаю, что вы можете заменить двойные квадратные скобки [[ ]], определив разделитель, так что Vue будет видеть переменную, но Django будет игнорировать ее. Посмотрите этот учебник.

<script>
    var app = new Vue({
      delimiters: ['[[', ']]'],
      ...
</script>

Затем в вашем html:

<div class="card-form__col">
  <div class="card-form__group">
    <label for="cardMonth" class="card-input__label">Expiration Date</label>
    <select class="card-input__input -select" id="cardMonth" v-model="cardMonth" v-on:focus="focusInput" v-on:blur="blurInput" data-ref="cardDate">
      <option value="" disabled selected>Month</option>
      <option v-bind:value="n < 10 ? '0' + n : n" v-for="n in 12" v-bind:disabled="n < minCardMonth" v-bind:key="n">
          [[ n < 10 ? '0' + n : n ]]  
      </option>
    </select>
    <select class="card-input__input -select" id="cardYear" v-model="cardYear" v-on:focus="focusInput" v-on:blur="blurInput" data-ref="cardDate">
      <option value="" disabled selected>Year</option>
      <option v-bind:value="$index + minCardYear" v-for="(n, $index) in 12" v-bind:key="n">
          [[ $index + minCardYear ]]
      </option>
    </select>
  </div>
</div>
Вернуться на верх