I've been trying to refresh the content of a div at a given interval using vue.js, but up until now have had little if no success. Here's what I have at this point:
var vm = new Vue({
el: '#feature',
template: '<div id={{content}}></div>',
data:
featureList: [{
content: 'a'
}, {
content: 'b'
}, {
content: 'c'
}]
}
});
On my html, I've the following:
<div id="feature"></div>
My approach here is to iterate through this array and replace content in the template at a given interval. The problem is that I'm not sure how to do it.
This is what I tried as an alternative to having an array in data: making content a puted property with a setter function, with a single string in data. Like this:
var vm = new Vue({
el: '#feature',
template: '<div id={{content}}></div>',
data: {
content: 'a'
},
puted: {
setTemplate: {
set: function(newValue) {
var values= newValue
this.content = values
}
}
}
});
vm.setTemplate = 'c'
(jsfiddle here)
Now, how do I go from here? How do I change content at a certain interval from a set of given strings?
I've been trying to refresh the content of a div at a given interval using vue.js, but up until now have had little if no success. Here's what I have at this point:
var vm = new Vue({
el: '#feature',
template: '<div id={{content}}></div>',
data:
featureList: [{
content: 'a'
}, {
content: 'b'
}, {
content: 'c'
}]
}
});
On my html, I've the following:
<div id="feature"></div>
My approach here is to iterate through this array and replace content in the template at a given interval. The problem is that I'm not sure how to do it.
This is what I tried as an alternative to having an array in data: making content a puted property with a setter function, with a single string in data. Like this:
var vm = new Vue({
el: '#feature',
template: '<div id={{content}}></div>',
data: {
content: 'a'
},
puted: {
setTemplate: {
set: function(newValue) {
var values= newValue
this.content = values
}
}
}
});
vm.setTemplate = 'c'
(jsfiddle here)
Now, how do I go from here? How do I change content at a certain interval from a set of given strings?
Share Improve this question edited Feb 1, 2016 at 15:38 nunop asked Feb 1, 2016 at 15:01 nunopnunop 2,2072 gold badges21 silver badges37 bronze badges 2-
I'd use a
ready
method in the ponent so trigger thesetInterval
and updatedata
within it. – ceejayoz Commented Feb 1, 2016 at 15:38 - I guess that would work yes, I may try that approach too. Thanks! – nunop Commented Feb 2, 2016 at 0:46
1 Answer
Reset to default 9I think you can use the lifecycle hooks for this, specifically the ready
hook:
var vm = new Vue({
el: '#feature',
template: '<div id={{content}}>{{content}}</div>',
data: {
content: 'hi there',
features: ['a', 'b', 'c'],
currentIndex: 0
},
created: function() {
var self = this
setTimeout(function cycle() {
self.content = self.features[self.currentIndex++]
self.currentIndex %= self.features.length
setTimeout(cycle, 2000)
}, 2000)
}
});
See the updated fiddle.