Javascript Vue JS - 将 Json 放在数据上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27752499/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue JS - Putting Json on data
提问by Guilherme Cruz
I want to put my JSON data into Vue data, and a display, why can't I get to work?
我想把我的json数据放到vue数据里，一个显示，为什么不能工作？
compiled: function(){
var self = this;
console.log('teste');
$.ajax({
url: 'js/fake-ws.json',
complete: function (data) {
self.$data.musics = data;
console.log(self.$data.musics);
}
})
}
<div id="playlist" class="panel panel-default">
<div class="panel-body">
<ul>
<li v-repeat="musics.item" >
<a href="">{{nome}}</a>
</li>
<ul>
<div>
</div>
I can't get the code to work.. why?
我无法让代码工作..为什么？
回答by Migwell
I think the problem is that musicsis not initially part of your Vue data, so when you set its value using self.$data.musics = data, Vue doesn't know it needs to watch it. Instead you need to use the $addmethod like this:
self.$set("musics", data);
我认为问题在于它musics最初不是您的 Vue 数据的一部分，因此当您使用 设置其值时self.$data.musics = data，Vue 不知道它需要监视它。相反，您需要使用这样的$add方法：
self.$set("musics", data);
From the VueJs Guide:
来自 VueJs 指南：
In ECMAScript 5 there is no way to detect when a new property is added to an Object, or when a property is deleted from an Object. To deal with that, observed objects will be augmented with two methods: $add(key, value) and $delete(key). These methods can be used to add / delete properties from observed objects while triggering the desired View updates.
在 ECMAScript 5 中，无法检测何时向对象添加新属性，或何时从对象中删除属性。为了解决这个问题，观察对象将使用两种方法进行扩充：$add(key, value) 和 $delete(key)。这些方法可用于在触发所需的视图更新时添加/删除观察对象的属性。
回答by zcuric
thisrefers to the whole Vue object, so musicsobject is already accessible via this.musics. More info herein the VueJS API reference and herein the VueJS guide, and more on thishere.
this引用整个 Vue 对象，因此musics对象已经可以通过this.musics. 更多信息这里在VueJS API参考和这里的VueJS指导，更在this这里。
With that in mind the code should look something like this:
考虑到这一点，代码应该如下所示：
var playlist = new Vue({
el: '#playlist',
data:{
musics: '',
}
methods: {
compiled: function(){
var self = this;
console.log('test');
$.ajax({
url: 'js/fake-ws.json',
complete: function (data) {
self.musics = data
console.log(self.musics);
}
})
}
}
And the view would be something like this:
视图将是这样的：
<div id="playlist" class="panel panel-default">
<div class="panel-body">
<ul>
<li v-repeat="musics">
<a href="">{{nome}}</a>
</li>
<ul>
</div>
</div>
Also look at the code of this example.
也看看这个例子的代码。
回答by radeveloper
you can do that with vue-resource. Include vue-resource.js into your app or html file and:
你可以用 vue-resource 做到这一点。将 vue-resource.js 包含到您的应用程序或 html 文件中，并且：
{
// GET /someUrl
this.$http.get('/someUrl').then(response => {
// get body data
this.someData = response.body;
}, response => {
// error callback
});
}
