How to send data from html (Django backend) to js (Vue frontend)

Question

I'm developing a webpage. I have a login form in this webpage. I'm using Django for back-end and VueJS for front-end. To submit the form with Django, the requirement of Django is the CSRF Token. I currently can show the CSRF Token to HTML using {{ csrf_token }} .

Because I am using VueJS, I also use Vuetify to style the front-end. The CSRF Token is not visible to VueJS because VueJS doesn't recognize {{ csrf_token }} but HTML does.

After researching on the internet I found something. I tried using v-bind to give the CSRF Token from HTML to VueJS but unfurtunately the value of the v-bind is undefined. But if I go to my sourcecode (Ctrl+U), I can see that CSRF Toekn does work but VueJS does not recognize it.

Example:

<div id="LoginApp">
    <WJLogin
        v-bind:csrf="8cl33zQ8pYXXEMVCoSsqIzaFgQkLh6WYXqsQMN4z9X4oGkSGN8Thz922jQ19aG4B"
        v-bind:hello="world">
    </WJLogin>
</div>

When I use v-bind from VueJS to VueJS this works but from HTML to VueJS doesn't work

This is login.html

<div id="LoginApp">
    <WJLogin
        :csrf="{{csrf_token}}"
        :hello="world">
    </WJLogin>
</div>

This is WJLogin.vue

export default
{
    props: {
        csrf: String,
        hello: {
            type: String,
            default: "defaultValue"
        },
    },
..............
............

I expect the value of CSRF Token is accesable to VueJS.

Answer 1

Dr. Harold Hardvard,

I don't understand but your component is seen wrong.

Try this code please

<div id="LoginApp">
  <WJLogin
    :csrf="csrf_token"
    :hello="world">
  </WJLogin>
</div>

<template>
  <!-- If it is fixed -->
  <div>{{ $props.csrf }}</div>
</template>

<script>
export default {
  name: 'W3Login',
  props: {
    csrf: String
  },
  // If it will be change.
  computed: {
    token() {
      return this.$prop   
    } 
  }
  methods: {
    If using in any method.
    x() {
      ...
      this.$prop.csrf
      ... 
    }
  }
}
</script>

Example link JsFiddle

Answer 2

You shouldn't use v-bind:csrf since when django render csrf_token , it will be literal (eg not a variable). V-bind is used to bind object into component prop. So do this:

index.html:

<div id="LoginApp">
    <wjlogin
            csrf="{{ csrf_token }}"
            hello="world">
    </wjlogin>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
{% verbatim %}
<script>
    Vue.component('wjlogin', {
        template: `<div>{{ csrf }}<br/>{{ hello }}</div>`,
        name: 'wjlogin',
        props: {
            csrf: String,
            hello: {
                type: String,
                default: "defaultValue"
            },
        },
    });

    new Vue({el: '#LoginApp'})
</script>
{% endverbatim %}