I want to put my JSON data into Vue data, and a display, why can't I get to work?
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 target='_blank' href="">{{nome}}</a>
</li>
<ul>
<div>
</div>
I can't get the code to work.. why?
I think the problem is that musics
is 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 $add
method like this:
self.$set("musics", data);
From the VueJs Guide:
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.
this
refers to the whole Vue object, so musics
object is already accessible via this.musics
. More info here in the VueJS API reference and here in the VueJS guide, and more on this
here.
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 target='_blank' href="">{{nome}}</a>
</li>
<ul>
</div>
</div>
Also look at the code of this example.
Let's say I have a simple array like this: var myArr = [0,1,2,3,4,5,6,7,8,9] I'd like to extract a number of elements, starting from a specific index, like this: myArr.getElementsFromIndex(index, ...
Let's say I have a simple array like this: var myArr = [0,1,2,3,4,5,6,7,8,9] I'd like to extract a number of elements, starting from a specific index, like this: myArr.getElementsFromIndex(index, ...
I'm very new to JavaScript (and coding) and I'm studying through the book Head First JavaScript. From reading, I thought an anonymous function could be an argument since functions are values, but I ...
I'm very new to JavaScript (and coding) and I'm studying through the book Head First JavaScript. From reading, I thought an anonymous function could be an argument since functions are values, but I ...
I have created a hyperlink from my report and pass through a value successfully. ="http://Applicationlive:8080/ApplicationName/secure/EventReportPage.zul?EventReportId=" & Fields!event_report_id....
I have created a hyperlink from my report and pass through a value successfully. ="http://Applicationlive:8080/ApplicationName/secure/EventReportPage.zul?EventReportId=" & Fields!event_report_id....
$localStorage.doctorDateTime.push({ fullDate : new Date(doctorDateTime) }); I passed date string in new Date and then save it to local storage but when i retrieve ...
$localStorage.doctorDateTime.push({ fullDate : new Date(doctorDateTime) }); I passed date string in new Date and then save it to local storage but when i retrieve ...