Wie neue Komponentendaten erstellen, basierend auf bestehenden in Vue.js

Question

Ich habe folgende Vue.js Komponente:

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

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

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

Kanäle ist nur Array von Objekten, wie zB:

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

Jetzt möchte ich um eine neue Komponenteneigenschaft zu erstellen, zum Beispiel popularChannels, die verwendet wird, um nur beliebte Kanäle anzuzeigen. Ich habe versucht, diese wie in anderen MVVM-Frameworks zu tun:

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

aber dies nicht funktioniert.

Können Sie bitte sagen, wie man es in Vue.js macht? Vielen Dank.

Answer 1

Wenn ich Sie richtig verstehe, was Sie wollen, ist ein computed property.

Wenn ja, können Sie es so einfach wie dies tun:

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

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