VueJSでフィルターする

Question

私はVueJSでとても新しいので、私の質問はとても簡単です。私はvueフィルターを使用することはできません。問題を解決するのを手伝ってください。 私のhtmlファイルは次のように表示されます。このコードを試してみると、v-forの項目を表示することができず、また、フィルター：大文字を解決できませんでした。 誰にでもその理由を教えてもらえますか？ vuejs2大文字フィルター付き

<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を使用している場合は、removedをされています。

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

はdemoを参照してください：あなたは、次のように、このためtoUpperCase()を使用する必要があります。

同様orderByフィルタもvuejs2は、計算プロパティにlodashのorderBy（あるいはsortBy）を使用することを示唆している、削除されました：

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

VUE

HTML

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

ここはdemo with orderByです。

Answer 2

計算されたプロパティを使用できます。

マークアップ：Vueの内部

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

定義：

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

そして、あなたは<select></select>のように、入力のいずれかの種類にv-model="sortKey"を使用して（sortKeyを変更することでorderedListの要素の順序を変更することができますまたは他の方法で）。大文字について

---

Here is an example based on your codeそして、何が、私はCSSでビューを制御することを好む、とtext-transformプロパティは、この問題を解決することができます。.pan__title { text-transform: uppercase; }。しかし、これも計算されたプロパティを定義したり、{{ message.toUpperCase() }}とインラインにしておくことができます。