javascript - 使用vue-resource时TypeError : t. replace is not a function错误

Question

我编写了一个简单且非常基础的 Vuejs 代码来显示数组中的人员列表。

这是 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"
  }
]

但是当运行它时，我在 chrome 中得到了这些错误:

TypeError: t.replace is not a function

接着是这个错误:

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

我正在使用 VueJs 2。

Answer 1

您没有正确使用 $http.get:第一个参数应该是一个字符串，表示您要获取的 url，然后您可以将选项对象作为第二个参数。

您在开发时可能应该使用非缩小版本以获得更清晰的错误消息(我得到 template.replace is not a function 然后能够在 github 上将其作为问题找到)