I am trying to use Vue.js in Django templates. One such template is the following:
{% load static %}
Hello [[ message ]]
I changed Vue's interpolation delimiters to [[ ]] to avoid conflict with Django. My script.js looks as follows:
$(function() {
var app = new Vue({
el: '#myApp',
delimiters: ['[[', ']]'],
data: {
message: 'Hello, world!'
}
});
});
Unfortunately, the HTML rendered contains [[ message ]]. Has anyone else faced a similar issue?
解决方案
As the per docs of Vue v1.0 say:
// ES6 template string style
Vue.config.delimiters = ['${', '}']
So, in your example change to:
$(function() {
Vue.config.delimiters = ['[[', ']]'];
var app = new Vue({
el: '#myApp',
data: {
message: 'Hello, world!'
}
});
});
It is strongly recomended, though, to use the new version of Vue (version 2) in order to be up-to-date!