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：第一个参数应该是一个字符串，表示您要获取的网址，然后您可以将选项对象作为第二个参数。

您在开发时应该使用非缩小版本以获得更清晰的错误消息（我得到了template.replace不是函数，然后能够在github上找到这个问题）

TypeError：使用vue-resource时t.replace不是函数错误

1 个答案: