Question

获取示例

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

<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

这应该这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

2 个答案: