Vue.js代码,django项目中运行失败。【已知晓原因】

<div id="bbq">
        <template v-for="item in todolist">
            <li>{{ item.title }}</li>
        </template>
</div>
    <script>
    var vmll = new Vue({
            el: '#bbq',
            data: {
                test: 'Test',
                todolist: [
                    {title: 'abc'},
                    {title: 'efg'}
                ]
            },
            methods: {
                cli: function (event) {
                    alert('bbc');
                }
            }
        });
     </script>

页面上显示出来的数据是空的, 不知道是什么原因啊,在单独的文件中是正常显示数据的,但是在我项目中却显示不出来,也不报错。

PS:
原因是django的模板系统会默认接管{{ }}中间的变量, 特么跟Vue.js就冲突了。
把需要用到{{ }}的地方用模板标记{% verbatim %} {{ message }} {% endverbatim %}包裹起来就好了.

回答:

妈蛋, 找到原因了, 是因为django的模板系统会默认把{{}}中间的内容解析为模板变量, 我忘记了。

回答:

前面看了没发现有什么问题就没答,结果是这个原因。。。框架结合后端的模板引擎一起使用这种问题很常见,在Vue中全局改一下分隔符吧,比起你在django用{% verbatim %},{% endverbatim %}避免问题,直接把Vue的分隔符改一下会更简单,而且也更灵活。

Vue.config.delimiters = ['${', '}']

回答:

不应该是<template></template>包裹<div id=”bbq”>的么?

回答:

试着把template换成div看看

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注