Django Vue Js - 使用 Axios - 渲染数据中的问题答案

【问题标题】：Django Vuejs -- Using Axios - Issue in redering DataDjango Vue Js - 使用 Axios - 渲染数据中的问题
【发布时间】：2019-11-05 02:48:12
【问题描述】：

我正在尝试在我的 Django 框架中使用 VueJs（Django 作为后端）和 Vuejs 作为前端。但是，我对 axios 很陌生，我发现它更容易与 VueJS Front-End 一起使用。在集成 all togetherr 时，我没有看到任何东西，但我可以看到我的代码是使用 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

【问题讨论】：

我想你想做的是将你的 HTML 放入一个 Vue 组件的模板中？

标签： django vue.js axios

【解决方案1】：

{{ post.title }} 一直是渲染数据到 Django 页面的问题，因为 Django 也使用了这个{{ }}。但是，在有人使用 VueJS 服务器渲染页面的情况下，则不适用。然后，记得添加这个：

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();
  }

});

【讨论】：