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 item in v-for can't be shown and also the it has error Failed to resolve filter: uppercase. Can any one tell me why?

    <div id="pan" class="pan">
     <div v-for="item in list|orderBy 'level'" >{{item.id}}</div>
        <span>{{message | uppercase}}</span>
   </div>

<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">

    var pan = new Vue({
  el: '#pan',

  data: {
    list: [
      { name: '東京', id:"TOKYO",level:"2"},
      { name: '全国',id:"JAPAN",level:"1" },
      { name: '関東',id:"KANTO",level:"0"  },


    ],
    message:"hello"
  }

});
</script>

tony19 · Accepted Answer · 2022-07-15 23:28:52Z

2

If you are using vuejs2, with vuejs2 uppercase filter has been removed. You will have to use toUpperCase() for this, like following:

<span>{{message.toUpperCase()}}</span>

see demo.

Similarly orderBy filter also has been removed, vuejs2 suggests to use lodash’s orderBy (or possibly sortBy) in a computed property:

HTML

<p v-for="item in orderedList">{{ item.name }}</p>

vue

computed: {
  orderedList: function () {
    return _.orderBy(this.list, 'level')
  }
}

Here is demo with orderBy.

edited Jul 15, 2022 at 23:28

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 18, 2017 at 7:58

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tanapat RUENGSATRA Over a year ago

what about orderBy function ?

Saurabh Over a year ago

@TanapatRUENGSATRA Yes orderBy also has been removed

Tanapat RUENGSATRA Over a year ago

so what function can I use for orderBy feature?

Sergei Klykov · Accepted Answer · 2017-01-18 09:15:49Z

1

You can use a computed property.

Markup:

<div id="pan" class="pan">
     <div v-for="item in orderedList" >{{ item.id }}</div>
     <span class="pan__title">{{ message }}</span>
</div>

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 <select></select> 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() }}.

edited Jan 18, 2017 at 9:15

answered Jan 18, 2017 at 8:45

Sergei Klykov

1,0376 silver badges6 bronze badges

1 Comment

Tanapat RUENGSATRA Over a year ago

Thank you for your commend. It is really useful

Collectives™ on Stack Overflow

Filter with VueJS

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related