Как создать новые данные компонентов на основе существующих в Vue.js

Question

я следующий Vue.js компоненты:

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

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

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

Каналов просто массив объектов, как:

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

Теперь я хочу для создания нового свойства компонента, например, под названием popularChannels, который будет использоваться для отображения только популярных каналов. я пытался сделать это, как и в других MVVM-фреймворков:

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

, но это не работает.

Не могли бы вы рассказать, как это сделать в Vue.js? Спасибо.

Answer 1

Если вы правильно поняли, что хотите, это computed property.

Если да, то вы можете сделать это так же просто, как это:

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

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