CODEWITHSUNDEEP
javascriptvue.js
javier_domenech
javier_domenech

Reputation: 6263

Sortable list of components

I've made my filters section using vue.js. I inject all the components through ajax and they response dynamically to those filters. Components in my case represent cars, they have price, marks, etc...

Now I'd like to add two more filters that allow me to sort them by some field (price, for instance). I've been reading and it's quite easy to sort lists specifying a field and a order...

How should I proceed to create that list and so, being able to sort it.

Here I made a little fiddle, very simple, in which I'd to sort the cars by prize once I click the filter.

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){

        }
   }
});

Upvotes: 0

Views: 40

Answers (1)

thanksd
thanksd

Reputation: 55644

First, store the data for each car component in a data property in the parent component:

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

Then, use the v-for directive to create a box_carcomponent for each of the objects in your cars data property:

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

Then, in your sortBy method, simply sort the 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.

Upvotes: 1

Related Questions