Filter with VueJS

Question

I am very new with VueJS so my question is very simple. I cannot use vue filter. Please help me fix the problem. My html file is shown as followed. When I try this code the

Answer 1

You can use a computed property.

Markup:

     
{{ item.id }}
     {{ message }}

Definition inside of Vue:

data(){
    sortKey : 'level'
},
computed : {
    orderedList(){ return this.list.sort(this.sorter) }
},
methods : {
    sorter(a,b){ return a[this.sortKey] > b[this.sortKey] }
}

And then you can change order of the elements in orderedList by modifying sortKey (using v-model="sortKey" to any kind of input, like or any other way).

Here is an example based on your code

---

And what about uppercase, I prefer to control a view with css, and text-transform property can solve this: .pan__title { text-transform: uppercase; }. But you can define a computed property for this one too or keep it inline with {{ message.toUpperCase() }}.