How to create new component data based on existing in Vue.js

Question

I have following Vue.js component:

Vue.component('channels-list', {
    data() {
        return {
            channels: [],
        }
    },

    methods: {
        getChannels() {
            this.$http.get('/channels')
                .then(response => {
                    this.channels = response.data;
                });
        }    
    },

    ready() {
        this.getChannels();
    }
});

Channels is just array of objects, like:

[{
    "id": 1,
    "title": "ANB",
    "image_url": "/img/1.png",
    "popular": true
}, {
    "id": 2,
    "title": "Roya TV",
    "image_url": "/img/2.png",
    "popular": false
}]

Now I want to create a new component property, for example called popularChannels, which will be used in view to display only popular channels. I tried to do this like in other MVVM-frameworks:

data() {
    return {
        channels: [],
        popularChannels: function() {
            return this.channels.filter(function(item) {
                return item.popular
            });
        }
    }
},

but this doesn't works.

Can you please tell how to do it in Vue.js? Thank you.

Tiago Engel · Accepted Answer · 2016-08-04 11:35:25Z

4

If I understand you correctly what you want is a computed property.

If so, you can do it as simple as this:

data() {
  return {
    channels: [],        
  }
},

computed: {
  popularChannels: function() {
    return this.channels.filter(function(item) {
      return item.popular
    });
  }
}

answered Aug 4, 2016 at 11:35

Tiago Engel

3,6712 gold badges19 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create new component data based on existing in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related