0
246
Vistas¿Cómo puedo mostrar datos de js a html en django:TemplateSyntaxError en /pago No se pudo analizar el resto: '[$index]' from 'cardNumber[$index]'
Estoy creando una página de pago con tarjeta donde tiene una tarjeta y un cuadro de texto cuando escribo en el cuadro de texto, debería mostrarse en la tarjeta, pero estoy usando {{n < 10? '0' + n : n}} ,{{$index + minCardYear}} en HTML para obtener el número en la tarjeta con animación.
<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 me está dando el error de:
TemplateSyntaxError en /pago No se pudo analizar el resto: '[$index]' from 'cardNumber[$index]'
¿Cómo puedo resolverlo para que Django ignore esas partes y js debería leer eso?
1 Respuestas
Responde la pregunta0
No estoy familiarizado con Vue.js, pero sé que sus etiquetas de plantilla son las mismas {{ }} que el lenguaje de plantilla de Django, pero creo que puede sustituir los corchetes dobles [[ ]] definiendo el delimitador para que Vue ver la variable, pero Django la ignorará. Consulte este tutorial .
<script> var app = new Vue({ delimiters: ['[[', ']]'], ... </script>Luego en tu 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>