鍍金池/ 問答/HTML/ vue.js的index.html中如何向app傳遞更多參數(shù)？

vue.js的index.html中如何向app傳遞更多參數(shù)？

vue.js build之后是在django下面運行的，首頁用一個django view渲染，通過context給它傳遞了參數(shù)，到了index.html中拿到參數(shù)后，怎樣進一步傳遞到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>
回答
編輯回答
絯孑氣

官方論壇里幫你找了個回答：

HTML:

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

JS:

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

原解答點這里

2018年4月27日 12:36
編輯回答
逗婦乳

最簡單粗暴的方法：

<script>
  window.vars = {% 輸出一個 json 在這里 %}
</script>

你知道 json 語法是 js 的子集，所以這樣不會有語法錯誤，window.vars 直接就是一個對象了。

希望對你有幫助

2017年3月15日 18:13