TypeError: t.replace is not a function error when using vue-resource

Question

I wrote a simple and very basic Vuejs code to show a list of people in an array.

this is HTML markup :

<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>

And this is Vue js codes :

<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>

And people.json file is like this :

[
  {
    "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"
  }
]

But when run that , I get these error in chrome :

TypeError: t.replace is not a function

followed by this error :

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

I'm using VueJs 2 .

Answer 1

You're not using $http.get correctly: the first argument should be a string which indicates the url you want to fetch and then you can have an options object as a second argument.

You should probably use the non minified version when you are developing to get clearer error message (I got template.replace is not a function and was then able to find this as an issue on github)