How do I pass more parameters to app in vue.js 's index.html?

vue.js build is run under django. The home page is rendered with a django view, and the parameters are passed to it through context. After getting the parameters in index.html, how to pass them to app?

class IndexPageView(TemplateView):
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context["now"] = timezone.now()
        return context

urlpatterns = [
    url(r"^admin/", admin.site.urls),
    url(r"^api/", include("api.urls")),
    url(r"^$", IndexPageView.as_view(template_name="index.html")),
]
<body>
  <div style="display: none;">
    context from django: {% templatetag now %}
  </div>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
Mar.04,2021

the simplest and rudest way:

<script>
  window.vars = {%  json  %}
</script>

you know that json syntax is a subset of js, so there will be no syntax errors. window.vars is directly an object.

I hope it will be helpful to you


an answer has been found for you in the official forum:

HTML:

<div id="my-target-element" data-var-name="var-value"></div>

JS:

new Vue({
    el: '-sharpmy-target-element',
    template: '<div>Just an example with {{varName}}</div>',
    data: {varName: null},
    beforeMount: function () {
        this.varName = this.$el.attributes['data-var-name'].value;
    },
});

the original answer point here

Menu