Vue + Django 템플릿 언어를 사용할 때 이중 괄호 문제는 어떻게 해결합니까?

Vue + Django 템플릿 언어를 사용할 때 이중 괄호 문제는 어떻게 해결합니까?

저는 Django 템플릿 언어를 사용하고 있으며, 제 프로젝트에서 Vue를 사용하고 싶습니다.제가 직면한 주요 문제 중 하나는{{...}}구문을 사용합니다.내 Vue 데이터는 전혀 렌더링되지 않습니다.

<div id="app">{{ message }} // This is just empty on my page </div>

기본적인 Vue 스크립트를 사용하고 있습니다.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

이거 어떻게 풀어요?

글렌판트가 한 말은 쉽지만 이건 더 쉽다.

var app = new Vue({
    delimiters: ['{', '}'],
    el: '#app',
    data: { message: 'Hello Vue!' },
})

이상입니다. Vue가 작동하기 위해 사용해야 하는 태그를 사용하여 Vue를 구성합니다.:) 브레이스를 1개만 사용합니다.{…}– 그러나 이중 대괄호도 사용할 수 있습니다.[[그리고.]].

를 사용합니다.verbatim템플릿 태그https://docs.djangoproject.com/en/1.11/ref/templates/builtins/ #말 그대로

<div id="app">{% verbatim %}{{ message }}{% endverbatim %}</div>

기본 템플릿에서 다음 행을 추가할 수 있습니다.

 <script>Vue.config.delimiters = ['${', '}'];</script>

그러면 다음 명령을 사용할 수 있습니다.%{...}Vue의 경우{{...}}장고를 위해서.

언급URL : https://stackoverflow.com/questions/46024817/how-to-solve-double-curly-brackets-issue-when-using-vue-django-template-langua