如何在我的数组中获取该用户的真实索引？

Question

我的例子来自Vue JS docs

如果我有一个已过滤的v-for，我如何在我的数组中获取此用户的 real 索引？不是当前迭代的索引，而是数组中项目的索引。

<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

据我所知，你不能。不过你可以做这样的事情。

<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' },
    ] )
  }
})

Answer 2

应该这样做：

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);
	}
  }
});

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

在方法集合中添加了一个 getIndexOfItem 方法，并在 v-for 中传递数组和项，然后返回项索引，这看起来很复杂，但大多数其他实现似乎都不起作用。

编辑 2

我删除了方法集合中的函数。

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

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