VueJS Verbindung mit externen Daten

Question

Ich lerne VueJs. Ich habe ein einfaches Projekt getan Sie hier sehen können:

var vuePosts = new Vue({ 
 
    el: '#vue-posts', 
 
    data: { 
 
    posts: [ 
 
     {title: 'title 1', body: 'message 1'}, 
 
     {title: 'title 2', body: 'message 2'} 
 
    ] 
 
    } 
 
})

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
<div class="vue-test" id="vue-posts"> 
 
    <h1>Vue Test</h1> 
 
    <ul v-for="post in posts"> 
 
    <li> 
 
     <h1>{{post.title}}</h1> 
 
     <p>{{post.body}}</p> 
 
     <hr /> 
 
    </li> 
 
    </ul> 
 
</div>

Wie man sehen kann ich nur ein v-für tue und die Post für die js Akte.

Meine Frage ist, wie soll ich tun es ich die Daten von einer externen Quelle wie

https://jsonplaceholder.typicode.com/posts

Wie kann ich importieren Sie die Daten auf meine data: und benennen Sie es als Beiträge verwenden?

Answer 1

Sie können eine Methode erstellen, die die Remote-API aufruft, die Daten abruft und sie Ihrer Datenvariablen this.posts zuweist.

methods: { 
    getPosts: function() { 
     var that = this 
     $.ajax({ 
     url: 'https://jsonplaceholder.typicode.com/posts', 
     method: 'GET' 
     }).then(function (response) { 
     if(response.error) { 
      console.err("There was an error " + response.error); 
     } else { 
      console.log(response.posts); 
      this.posts = response.posts 
     } 
     }).catch(function (err) { 
     console.error(err); 
     }); 
    } 
    } 

und Sie können diese Methoden montiert Block, der und die Pfosten zuweisen holen aufrufen, wenn Ihre Komponente montiert ist: Code aus dem wird wie folgt aussehen here Frage inspiriert.

mounted() { 
    this.getPosts() 
} 

Sie können auch einen Blick auf meine answer haben, wie axios zu verwenden, die für die Herstellung von api ein HTTP-Client ist aufruft

Siehe Stift arbeiten here.