如何解决如何将django中的变量导入vue.js实例
我想将django生成的html页面中的变量导入到App.vue组件中。
我的目标是传递一个表示用户AuthGroup的字符串,例如。 'milkman'
,'hairdresser'
或'supplier'
错误消息如下:
模块解析失败:意外令牌(1:1)
您可能需要适当的加载程序来处理此文件类型,当前没有配置任何加载程序>处理此文件。参见https://webpack.js.org/concepts#loaders {%扩展了'base.html'%} | {%从webpack_loader中加载render_bundle%} | {%load navtag%}
frontend.html
{% extends 'base.html' %}
{% load render_bundle from webpack_loader %}
{% load navtag %}
{% block head %}
<title>title</title>
<script>
const test = "{{ auth_group }}" // variable/string needed in App.vue
</script>
{% endblock %}
[...]
{% block content_vue %}
<div id="app">
<app></app>
</div>
{% render_bundle 'app' %}
{% endblock %}
我不知道如何修改webpack或找到将django中的变量导入vue项目的方法。仅供参考:vue项目只是大型Django环境的一小部分。
解决方法
现在我使用用户会话,并通过window
将数据获取到vue环境:
// frontend.html
<script>
window.testToken = "{{ auth_group }}"
</script>
// 1. App.vue
async created() {
store.dispatch('store/setTest')
}
// 2. in store
actions: {
setTest({commit}) {
commit('setToken')
}
}
// 3. trigger mutation
mutations: {
setToken(state) {
state.token = testToken
}
}
// 4. state
state: {
token: '' // String from django is here
}
有更好的解决方案吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。