Question

我正在尝试在我的Django框架（以Django为后端）和Vuejs作为前端中使用VueJs。但是，我对axios还是很陌生，我发现它更易于与VueJS前端一起使用。在集成所有的收集器时，我什么都没看到，但是我可以看到我的代码是使用vueJS开发人员工具遍历数据的。

index.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>The greatest news app ever</title>

  </head>
  <body>

    <div id="app">
        <template v-for="post in posts">
          <p> Hello - {{ post.title }}</p>
        </template>

    </div>

     <script src="{% static 'vue/vue.js' %}"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script src="{% static 'vue/app.js' %}"></script>

  </body>
</html>

app.js

new Vue({
  el: '#app',
  data: {

    posts: []
  },



  methods:{
    getPost: function(){
      var self = this;
      let url = "http://127.0.0.1:8000/api/allpost/";
      axios.get(url).then((response) => {
        this.posts = response.data
      }, (error) => {
          console.log(error);
      });
    }
  },
  mounted: function() {
    this.getPost();
  }

});

The Output of the code

Answer 1

{{ post.title }}一直是将数据渲染到Django Page中的问题，因为Django也使用了{{ }}。但是，在某人使用VueJS Server渲染页面的情况下不适用。然后，请记住添加以下内容：

delimiters: ['[[', ']]'],

   <li v-for="post in posts" v-bind:key="post.id">
      [[ post.title ]] <br/>
      [[ post.body ]]
      <hr/>
    <li>

new Vue({
  delimiters: ['[[', ']]'],

  el: '#app',
  data: {

    posts: []
  },



  methods:{
    getPost: function(){
      var self = this;
      let url = "http://127.0.0.1:8000/api/allpost/";
      axios.get(url).then((response) => {
        this.posts = response.data
      }, (error) => {
          console.log(error);
      });
    }
  },
  mounted: function() {
    this.getPost();
  }

});

Django Vuejs-使用Axios-还原数据中的问题

1 个答案: