Можем ли мы отправить данные из шаблона django в vuejs?

Question

У меня есть полное приложение vuejs, созданное с помощью веб-пакета.У меня есть шаблон django, в котором я смонтировал минимизированный js-файл vuejs.Теперь, если я хочу получить контекстные данные из шаблона django в js-скрипт, можно ли отправить данные?

index.html:

{% block content %}
    <div id="app"><div>
    <script src="build.js">`
{% endblock %}

views.py:

def get(request):
    context={"token":"new"}
    return render(request,template, context)

Answer 1

Следующий метод является немного более декларативным, используя именованный параметр в вашем основном компоненте Vue.Предполагая, что вы ввели контекстную переменную «token» в контекст представления django, вы можете сделать что-то подобное в шаблоне django:

<script>const jscontext={token: '{{ token }}'}</script>
<!--Could just have easily been simple variable.  An object with
 multiple properties could be used for a more comprehensive context-->
 <div id="app"></div>
 {% render_bundle 'app' %}

В App.vue вы добавили бы код для принятия свойства, называемого token:

<script>
    export default {
        name: "app",
        props: {
            token: {
                type: String,
                required: true
            }
        }
    }
</script>

И затем в вашем main.js (или в любом другом, создающем ваш компонент Vue, возможно, build.js в вашем примере) вы вызываете компонент со свойством token из объекта jscontext, который вы создали вболее ранний шаблонный скрипт

new Vue({
  router,
  render: h => h(App, {props: {token:jscontext.token}})
}).$mount('#app')

токен теперь будет доступен для App.vue через его свойство, поэтому его можно отобразить с помощью {{token}} или получить к нему доступ в коде с помощью this.token и т. д. Как и в предыдущемкомментарии, токен будет виден в источнике.

Answer 2

Может быть так:

views.py

context={"token":"new"}

index.html

{% block content %}
    <div id="app">
      <div token="{{ token}}"></div>
    <div>
    <script src="build.js">`
{% endblock %}

в экземпляре

beforeMount(){
  this.whatever = document.getElementsByTagName('div')[1].getAttribute('token') || '';
}