我如何将数据从 js 显示到 html in django:TemplateSyntaxError at /payment 无法解析余数：'[$index]' 来自 'cardNumber[$index]'

Question

我正在创建一个卡支付页面，其中有一个卡和文本框，当我在文本框中输入时，它应该显示在 card.but 我正在使用 {{n < 10 ? '0' + n : n}} ,{{$index + minCardYear}} in 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>

Django 给我的错误是：

TemplateSyntaxError 在 /payment 无法解析余数：来自 'cardNumber[$index]'

的“[$index]”

我怎样才能解决这个问题，让 Django 忽略这些部分，而 js 应该读取它。

Answer 1

我不熟悉 Vue.js，但我知道他们的模板标签与 Django 模板语言相同 {{ }}，但我相信你可以用双方括号代替 [[ ]] 通过定义分隔符，这样 Vue 就会看到变量，但 Django 会忽略它。看看这个 tutorial.

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

我如何将数据从 js 显示到 html in django:TemplateSyntaxError at /payment 无法解析余数：'[$index]' 来自 'cardNumber[$index]'

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

html

javascript

django

django-templates