admin管理员组

文章数量:1317894

I use Django and VueJs.

I tried to use Vue in Django template but when try to display data from my script nothing appear.

This is my html file : 

{% load static %}
<body>
  <p>No polls are available.</p>
  <div id="app">
    {{message}}
  </div>
  <script src="{% static "app.js" %}" defer></script>
  <script src=".5.16/vue.js">     
  </script>
</body>

And in my app.js : 

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

My script is loaded but Hello Vue! won't appear.

I use Django and VueJs.

I tried to use Vue in Django template but when try to display data from my script nothing appear.

This is my html file : 

{% load static %}
<body>
  <p>No polls are available.</p>
  <div id="app">
    {{message}}
  </div>
  <script src="{% static "app.js" %}" defer></script>
  <script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.16/vue.js">     
  </script>
</body>

And in my app.js : 

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

My script is loaded but Hello Vue! won't appear.

  • javascript
  • html
  • django
  • templates
  • vue.js
Share Improve this question asked Apr 20, 2018 at 19:09 Max0uMax0u 7201 gold badge10 silver badges23 bronze badges 2
  • If use Vue, I dont' think it is a good idea to mix-use Django Template. the issue you met should be {{message}} is parsed by Django template, {{message}} will be blank if you didn't response with render_to_response(r'your-template.tpl',{'message': 'something at here'}), that means when the browser received the response from the server, it doesn't have {{message}}at there – Sphinx Commented Apr 20, 2018 at 22:25
  • Possible duplicate of Making Django & Vue.js work together with {% verbatim %} – Sphinx Commented Apr 20, 2018 at 22:39
Add a ment  | 

3 Answers 3

Reset to default 8

It seems Vue JS delimiters {{ & }} crashed with jinja template delimiters. The solution is just change the delimiters.

new Vue({
    delimiters : ['[[',']]'],
    el: '#app',
    data: () => {
      return {
         message: "hello world"
      }
    }
  })

Here I change the delimiters to [[ & ]]. so, you can use it like this :

<div id="app">[[message]]</div>

Your data

data: {
message: 'Hello Vue!'
}

Should be 

 data: function () {
  return {
    messages: 'Hello!'
  }
 }

As it was pointed out in another answer: working example below:

new Vue({
    el: '#app',
    data: () => {
      return {
    	  message: "hello world"
      }
    }
})
<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  Message: {{ message }}
</div>

本文标签： javascriptVueJs data won39t displayStack Overflow

版权声明：本文标题：javascript - VueJs data won&#39;t display - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742037815a2417398.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。