Как отправить данные из html (бэкэнд Django) в js (внешний интерфейс Vue) - PullRequest
Новая
       36

Как отправить данные из html (бэкэнд Django) в js (внешний интерфейс Vue)

0 голосов
/ 13 мая 2019

Я занимаюсь разработкой веб-страницы.У меня есть форма входа на этой веб-странице.Я использую Django для back-end и VueJS для front-end.Чтобы отправить форму вместе с Django, требуется, чтобы Django был токен CSRF.В настоящее время я могу показать токен CSRF в HTML, используя {{ csrf_token }}.

Поскольку я использую VueJS, я также использую Vuetify для стилизации внешнего интерфейса.Токен CSRF не виден VueJS, потому что VueJS не распознает {{ csrf_token }}, а HTML распознает.

После исследования в Интернете я нашел кое-что.Я пытался использовать v-bind для передачи токена CSRF из HTML в VueJS, но, к сожалению, значение v-bind не определено.Но если перейти к исходному коду (Ctrl + U), я увижу, что CSRF Toekn работает, но VueJS его не распознает.

Пример: 

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

Когда я использую v-привязка из VueJS к VueJS это работает, но из HTML в VueJS не работает

Это login.html 

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

Это WJLogin.vue 

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

Я ожидаю, что значение CSRF Token доступно для VueJS.

Ответы [ 2 ]

0 голосов
/ 13 мая 2019

Вы не должны использовать v-bind:csrf, так как когда django рендерит csrf_token, он будет буквальным (например, не переменная). V-bind используется для привязки объекта к компоненту prop. Так что сделайте это:

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 %}
0 голосов
/ 13 мая 2019

Dr.Гарольд Хардвард,

Я не понимаю, но ваш компонент виден неправильно.

Попробуйте этот код, пожалуйста 

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

Пример ссылки JsFiddle

...