如何基於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-frameworks中那樣做：

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

但這是行不通的。

你能告訴我如何在Vue.js中做到嗎？ 謝謝。

Answer 1

如果我正確理解您想要的是計算屬性 。

如果是這樣，您可以像這樣簡單：

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

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