Django Vuejs - Использование Axios - Проблема при рендеринге данных - PullRequest
Новая
       12

Django Vuejs - Использование Axios - Проблема при рендеринге данных

0 голосов
/ 22 июня 2019

Я пытаюсь использовать VueJs внутри моей Django Framework (Django как Backend) и Vuejs как Front-End.Тем не менее, я очень новичок в работе с axios, который, как мне показалось, проще использовать с VueJS Front-End.При интеграции всех вместе я не увидел ничего подходящего, но я вижу, что мой код перебирает данные с помощью vueJS Developer Tools.

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

});

Вывод кода

1 Ответ

1 голос
/ 24 июня 2019

{{ post.title }} была проблема с отображением Данных на Страницу Django, потому что 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();
  }

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...