外部データに接続するVueJS

Question

私はVueJsを学習しています。あなたは、私はちょうどV-のためにやってJSファイルのためのポストを取って見ることができるように

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>

：私はあなたがここに見ることができる単純なプロジェクトを行っています。

私の質問は、私はそれを行う必要がありますどのように私は私のdata:にデータをインポートし、ポストとしてそれに名前を付けることができますどのように

https://jsonplaceholder.typicode.com/posts

などの外部ソースからのデータを使用したいですか？

Answer 1

リモートAPIを呼び出してデータを取得し、データ変数this.postsに割り当てるメソッドを作成できます。質問hereからインスピレーションを得たコードは、次のようになります。

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

を、あなたのコンポーネントが搭載されているときの記事を取得して割り当てるなる、取り付けられたブロックからこのメソッドを呼び出すことができます。あなたはまた、APIを作るためのHTTPクライアントであるaxiosを使用する方法についての私のanswerで見ることができ

mounted() { 
    this.getPosts() 
} 

は作業ペンhereを参照してください

を呼び出します。