分かりやすいコンポーネントのリスト

Question

私はvue.jsを使用してフィルタセクションを作成しました。私はすべてのコンポーネントをajaxを通して注入し、それらのフィルタに動的に応答します。私の場合のコンポーネントは車を表すもので、価格、マークなどがあります。

ここでは、いくつかのフィールド（価格など）で並べ替えるためのフィルタを2つ追加します。私は読んでおり、フィールドと注文を指定してリストを並べ替えるのは簡単です...

どのようにリストを作成してソートすることができますか。

Here私はフィルターをクリックすると、賞金で車を並べ替えることができる、非常に簡単なフィドルを作った。

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

まず、親コンポーネントのデータプロパティの各自動車部品のためのデータを格納します。

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' }, 
    ] 
    } 
}, 

次に、あなたの内のオブジェクトごとにbox_carコンポーネントを作成するためにv-forディレクティブを使用carsデータプロパティ：

// 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> 

次に、あなたのsortBy方法では、単にを並べ替えます10アレイ：

// 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。