Vue.js list orderByフィルタは動的に追加された項目を配列に並べ替えません

Question

新しいオブジェクトがVue.jsコンポーネント内のオブジェクトの配列に追加されると、レンダリングされたリストは更新されますが、oderByフィルタは適用されません新しい項目が追加されました。たとえば、各オブジェクトが奇形nameとorderByのフィルタを持つオブジェクトの配列は、nameに適用されます。新しいオブジェクトを配列にプッシュすると、このオブジェクトはレンダリングされたリストの最後の項目として表示されます。 unshiftを使用すると、オブジェクトがリストの最初の項目として表示されます。

すべての項目にorderByフィルタを適用して、Vue.jsがリストを再レンダリングできる配列に項目を正しく追加するにはどうすればよいですか？

Vue.set/$setで試してみましたが、この作業を行うことはできませんでした。 何か助けていただければ幸いです。

HTML：

<div v-for="object in array | orderBy 'name'"> 
    {{ object.name }} 
</div> 

JS：

data: function() { 
    return { 
     array: [ 
      { 
       name: 'Jon' 
      }, 
      { 
       name: 'Alex' 
      } 
     ] 
    }, 
}, 
methods: { 
    addItemToArray() { 
     let item = { name: 'Paul' } 
     this.array.push(item) 
    } 
} 

Answer 1

何あなたがやりたいことは、レンダリングリストではなく、フィルタ機能を使用しての計算データで持つことがあるように見えます。私が間違っていないと、フィルタは自動的には更新されませんが、計算されたプロパティは自動的に更新されません。

だから私はあなたがの線に沿って何か必要があるだろうと想像：

<template> 
    <div v-for="person in sortedArray"> 
     {{ person.name }} 
    </div> 
</template> 

<script> 
export default { 
    data() { 
     return { 
     array: [ ... ] 
     } 
    }, 
    computed: { 
     sortedArray() { 
     return orderByName(this.array) 
     } 
    }, 
    methods: { 
     orderByName(array) { 
     ... 
     } 
    } 
} 
</script> 

は、この情報がお役に立てば幸い！

Answer 2

methods: { 
    array: function (a, b) { 
     a = a.name.toLowerCase(); 
     b = b.name.toLowerCase(); 

     return a < b ? -1 : a > b ? 1 : 0; 
    } 

    array: function (a, b) { 
     return a.name < b.name ? -1 : a.name > b.name ? 1 : 0; 
    } 
} 

私は一種のここjavascriptとvuejsを組み合わせることがあったが、基本的にはそれが動作する理由比較<や友人が文字列の辞書式順序付けを使用するように定義されていることです。内部的には、一致する各文字をチェックし、2つの異なるUnicode値が見つかると、それが返され、結果として「辞書」の順序が決まります。これはまた、比較自体がコードポイント値のみを比較するので、toLowerCase()コールを追加する理由です。また、大文字と小文字を区別する並べ替えでも機能します

Javascriptのバリアントは次のようになります。

array.sort(function(a, b) { 
    a = a.name.toLowerCase(); 
    b = b.name.toLowerCase(); 

    return a < b ? -1 : a > b ? 1 : 0; 
}); 

array.sort(function(a, b) { 
    return a.name < b.name ? -1 : a.name > b.name ? 1 : 0; 
}); 

Answer 3

は私だけのアイテムを配列にプッシュされたときorderByフィルタが正常に動作しないことに気づきました。問題は追加されたアイテムのフォーマットにありました。もちろん私が取り組んでいるアプリは、私がここに投稿した例よりも複雑で、何かが欠けていました。ここ は、私はここに掲載同じ例で作業フィドルです：https://jsfiddle.net/crabbly/zr8156b3/

私が投稿したかったもう一つは、私が維持されたアプリはフィルターがVue.js 2.xから削除されたこと、およびVueの1.xのを使用していることです@ King-Reloadと@BenCodeZenで提案されている解決策は、並べ替えられた配列を返す計算されたプロパティを使用してソートされたリストを作成する代わりに組み合わせることができます。