How can i show data from js to html in django:TemplateSyntaxError at /payment Could not parse the remainder: '[$index]' from 'cardNumber[$index]'

Question

I am creating a card payment page where it has a card and text box when I type on textbox it should show on the card.but I am using {{n < 10 ? '0' + n : n}} ,{{$index + minCardYear}} in HTML to get the number on card with animation.

<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 is giving me the error of:

TemplateSyntaxError at /payment Could not parse the remainder: '[$index]' from 'cardNumber[$index]'

How can I solve it so that Django ignores those portions and js should read that.

Answer 1

I'm not familiar with Vue.js, but I do know that their template tags are the same {{ }} as Django template language, but I believe you can substitute double square brackets [[ ]] by defining the delimiter so Vue will see the variable, but Django will ignore it.. Check out this tutorial.

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

Then in your 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>