Фильтр с VueJS

Question

Я очень новичок в VueJS, поэтому мой вопрос очень прост. Я не могу использовать фильтр vue. Пожалуйста, помогите мне решить проблему. Мой html-файл отображается следующим образом. Когда я пытаюсь выполнить этот код, элемент в v-for не может быть показан, а также он имеет ошибку Не удалось разрешить фильтр: в верхнем регистре. Может ли кто-нибудь сказать мне, почему?

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

Answer 1

Если вы используете vuejs2 с vuejs2 прописной фильтр был removed. Вы должны будете использовать toUpperCase() для этого, как следующее:

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

см demo.

Аналогично orderBy фильтр также был удален, vuejs2 предлагает использовать lodash-х orderBy (или, возможно, sortBy) в вычисленной собственности:

HTML

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

вю

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

Здесь demo with orderBy.

Answer 2

Вы можете использовать вычислительное свойство.

Markup:

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

Определение внутри Vue:

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

И тогда вы можете изменить порядок элементов в orderedList путем изменения sortKey (с использованием v-model="sortKey" для любого вида входных данных, как <select></select> или любым другим способом).

Here is an example based on your code

---

А что прописные, я предпочитаю, чтобы контролировать вид с помощью CSS и text-transform свойство может решить эту проблему: .pan__title { text-transform: uppercase; }. Но вы можете определить вычисленное свойство для этого тоже или сохранить его в строке с {{ message.toUpperCase() }}.