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>
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 .
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, andtext-transform property can solve this: .pan__title { text-transform: uppercase; }
.pan__title { text-transform: uppercase; }
. But you can define a computed property for this one too or keep it inline with {{ message.toUpperCase() }}
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.