アレイ内のこのユーザーの実際のインデックスを取得するにはどうすればよいですか？

Question

私はフィルターだv-forを持っている場合は、どのように私は私の配列で、このユーザーの本当インデックスを取得しますVue JS docs

から私の例を取得していますか？現在の反復のインデックスではなく、配列の項目のインデックスです。

<div id="filter-by-example"> 
    <ul> 
    <li v-for="user in users | filterBy 'Jim' in 'name'"> 
     {{ user.name }} 
     {{ $index }} <!--I want Jim's index to be 3, not 0--> 
    </li> 
    </ul> 
</div> 

VueのJS：

new Vue({ 
    el: '#filter-by-example', 
    data: { 
    users: [ 
     { name: 'Bruce' }, 
     { name: 'Chuck' }, 
     { name: 'Jackie' }, 
     { name: 'Jim' }, 
    ] 
    } 
}) 

Answer 1

これはそれを行う必要があります。

new Vue({ 
 
    el: '#filter-by-example', 
 
    data: { 
 
    users: [ 
 
     { name: 'Bruce' }, 
 
     { name: 'Chuck' }, 
 
     { name: 'Jackie' }, 
 
     { name: 'Jim' }, 
 
    ] 
 
    }, 
 
    methods : { 
 
    getIndexOfItem: function(arr, item) { 
 
     return arr.indexOf(item); 
 
\t } 
 
    } 
 
});

<script src="https://unpkg.com/vue@next/dist/vue.js"></script> 
 

 

 
<div id="filter-by-example"> 
 
    <ul> 
 
    <li v-for="user in users"> 
 
     {{getIndexOfItem(users, user)}} - {{user.name}} 
 
    </li> 
 
    </ul> 
 
</div>

追加されたメソッドのコレクションに、配列に渡されたv-forでgetIndexOfItem方法itemはアイテムインデックスを返し、これは複雑に見えますが、他のほとんどの実装は動作していないようです。

編集2

私は、メソッドコレクション内の機能を削除しました。

<li v-for="(user, index) in users | filterBy 'Jim' in 'name'"> 

https://jsbin.com/misagagewo/edit?output

Answer 2

限り、私はあなたがすることはできません知っています。あなたはこのようなことをすることができます。

<div id="filter-by-example"> 
    <ul> 
    <li v-for="user in users | filterBy 'Jim' in 'name'"> 
     {{ user.name }} 
     {{ user._index }} 
    </li> 
    </ul> 
</div> 

JS：

function fixupObjArray(arr) { 
    arr.forEach((e,i) => e._index = i); 
    return arr; 
} 

new Vue({ 
    el: '#filter-by-example', 
    data: { 
    users: fixupObjArray([ 
     { name: 'Bruce' }, 
     { name: 'Chuck' }, 
     { name: 'Jackie' }, 
     { name: 'Jim' }, 
    ]) 
    } 
})