2017-06-11 10 views
0

配列内の人のリストを表示するために、単純で非常に基本的なVuejsコードを書きました。 TypeError:vue-resourceを使用しているときにt.replaceが関数エラーではありません

この

は、HTMLマークアップです:

<div id="container"> 

    <ul class="list-group"> 
     <li v-for="p in people" class="list-group-item"> 
      {{p.first_name}} {{p.last_name}} 
     </li> 
    </ul> 

</div> 

そして、これはVueのJSコードです:

<script> 
    new Vue({ 
     el: '#container', 
     data: { 
      people: [] 
     }, 
     mounted: function() { 
      this.$http.get({ 
       url: 'example/people.json' 
      }).then(function (response) { 
       console.log(response); 
       this.people = response; 
      }) 
     } 
    }) 
</script> 

そしてpeople.jsonファイルはこのようなものです:

[ 
    { 
    "id": 1, 
    "first_name": "Frasier", 
    "last_name": "Aleksashin" 
    }, 
    { 
    "id": 2, 
    "first_name": "Red", 
    "last_name": "Brooke" 
    }, 
    { 
    "id": 3, 
    "first_name": "Iolande", 
    "last_name": "Lanmeid" 
    }, 
    { 
    "id": 4, 
    "first_name": "Orelie", 
    "last_name": "Sharrock" 
    }, 
    { 
    "id": 5, 
    "first_name": "Sully", 
    "last_name": "Huitson" 
    } 
] 

しかし、実行は、Iクロムでこれらのエラーが発生する:

このエラーが続く
TypeError: t.replace is not a function 

Uncaught (in promise) TypeError: t.replace is not a function 

私はVueJs 2を使用しています。

答えて

1

$ http.getは正しく使用されていません。最初の引数は、フェッチするURLを示す文字列でなければなりません。その後、オプションオブジェクトを2番目の引数として使用できます。

あなたはおそらく、あなたが明確にエラーメッセージを取得するために開発されている非縮小さバージョンを使用する必要がありますが(私はtemplate.replaceは関数ではありませんし、その後、githubの上の問題としてこれを見つけることができたGOT)

関連する問題