Replacing vue.js template with setInterval

Question

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 computed 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'
  },
  computed: {
    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?

Answer 1

I 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 .