Sortierbare Liste der Komponenten

Question

Ich habe meine Filter-Sektion mit vue.js gemacht. Ich injiziere alle Komponenten durch Ajax und sie reagieren dynamisch auf diese Filter. Komponenten in meinem Fall repräsentieren Autos, sie haben Preis, Marken, etc ...

Jetzt möchte ich zwei weitere Filter hinzufügen, die mir erlauben, sie nach einem Feld (Preis, zum Beispiel) zu sortieren. Ich habe gelesen und es ist ziemlich einfach, Listen zu sortieren, die ein Feld und eine Reihenfolge spezifizieren ...

Wie sollte ich fortfahren, diese Liste zu schaffen und so, sortieren zu können.

Here Ich machte eine kleine Geige, sehr einfach, in der ich die Autos nach Preis sortieren würde, sobald ich den Filter klicke.

var Car = Vue.extend({ 

    template: '#template_box_car', 
    props: { 

     show: { 
     default: true 
     }, 

     code: { 
     default: "" 
     }, 

     prize: { 
     default: 0 
     }, 

     description: { 
     default: "No comment" 
     } 
    } 
}); 
//register component 
Vue.component('box_car',Car); 

//create a root instance 
var vm = new Vue({ 
    el: 'body', 

    methods: { 

     sortBy: function(field, order){ 

     } 
    } 
}); 

Answer 1

Zuerst speichern die Daten für jede Auto-Komponente in einer Dateneigenschaft in der übergeordneten Komponente:

data: function() { 
    return { 
    cars: [ 
     { code: '11A', prize: 5.00, description: 'Ford Ka' }, 
     { code: '11B', prize: 3.00, description: 'Kia ceed' }, 
     { code: '11C', prize: 6.00, description: 'Ford Ka' }, 
     { code: '13A', prize: 45.00, description: 'Mercedes A' }, 
     { code: '17B', prize: 20.00, description: 'Seat Leon' }, 
    ] 
    } 
}, 

Verwenden Sie dann die v-for Richtlinie eine box_car Komponente für jedes der Objekte erstellen in Ihrem cars Daten Eigenschaft:

// In your version of Vue.js it would look like this: 
<box_car 
    v-for="car in cars" 
    :code="car.code" 
    :prize="car.prize" 
    :description="car.description" 
    :track-by="code" 
></box_car> 

// In newer versions of Vue.js, you can pass each object to the `v-bind` directive 
// so you don't need to explicitly set each property: 
<box_car v-for="car in cars" v-bind="car" :key="car.code"></box_car> 

Dann in Ihrer sortBy Methode, sortiert einfach die cars Array:

// I used lodash, but you can sort it however you want: 
methods: {  
    sortBy: function(field, order) { 
    this.cars = _.orderBy(this.cars, field, order); 
    } 
} 

Here's a working fiddle.