Vue.js使用每行键获取JSON

Question

我正在尝试从API提取json，然后在vue.js中的简单无序列表中使用它。但是我无法正确引用JSON，我什至尝试重建列表都无济于事（在带注释的块中，它似乎只是默默崩溃）。

API返回的JSON：

0: Object { RemoteEndPoint: "10.0.0.2", Id: "6b11c5a055b8579fe5b7b1d6c5a57c0e", ServerId: "98366b0afd41474d8e6a84168bed082e", … }
1: Object { RemoteEndPoint: "10.0.0.101", Id: "c8dc9367919e5b9774359ae700f4adca", ServerId: "98366b0afd41474d8e6a84168bed082e", … }
2: Object { RemoteEndPoint: "10.0.0.7", Id: "8140b96c2b0765fab14e6bddd1178d29", ServerId: "98366b0afd41474d8e6a84168bed082e", … }
3: Object { RemoteEndPoint: "10.0.0.2", Id: "75450a20849433b18a889a01d417649f", ServerId: "98366b0afd41474d8e6a84168bed082e", … }
4: Object { RemoteEndPoint: "10.0.0.2", Id: "e54e6690fd640af9b2d28ecccc18681f", … }
5: Object { RemoteEndPoint: "10.0.0.2", Id: "6ba2b8d49b44de92d5e3a26c7d0a4318", … }
6: Object { RemoteEndPoint: "10.0.0.138", Id: "5a7fb1572043006888eabb9f506ecd1a", ServerId: "98366b0afd41474d8e6a84168bed082e", … }

代码：

<div id="streams">
<ul>
    <li v-for="libname in libnames">
        {{ libname.RemoteEndPoint }}
    </li>
</ul>
</div>
<script>
const streams = new Vue({
    el: '#streams',
    data: {
        libnames: []
    },
    created(){
        fetch(url,{method: 'GET',headers: apiheaders})
        .then(resp => resp.json())
        .then(function(data){
            console.log('Output: ', data);
            this.libnames = data;
            //for(var obj in Object.keys(data))
            //{
                //console.log("Data Obj",data[obj]);
                //libnames.push(data[obj]);
            //}
        })
        }
    }
)
</script>