Javascript 根据Vue.js中的特定项值获取列表中的最后一个值

我有一个Vue.js变量列表，我希望通过项值筛选后得到列表的最后一个值：

var users = new Vue({
  el: '#get-users',
  data: {
    items: [
      { id: 1, username: 'che', firstName: 'cheikh', group: 2 },
      { id: 1, username: 'lam', firstName: 'lamine', group: 1 },
      { id: 1, username: 'abd', firstName: 'abdoulaye', group: 1 },
      { id: 1, username: 'dem', firstName: 'demba', group: 3 },
      { id: 1, username: 'fat', firstName: 'fatou', group: 2 },
      { id: 1, username: 'pen', firstName: 'penda', group: 2 },
      { id: 1, username: 'olym', firstName: 'oly', group: 1 },
      { id: 1, username: 'aic', firstName: 'aicha', group: 1 },
    ]
  }
})

项目列表按添加日排序（此处不显示）。因此，我想按

组
筛选项目，并获取最后一个值。这里，如果我按组过滤：1，我应该

{ id: 1, username: 'aic', firstName: 'aicha', group: 1 }

不确定我是否完全理解了这个问题，但这可能有用：

function getFilteredLast(group) {
  let filteredItems = data.items.filter(item => item.group === group)
  return filteredItems.length > 0
    ? filteredItems[filteredItems.length - 1];
    : null;
}

在这里，我使用vue
computed
来过滤第1组项目，并获取第1组项目的最后一个元素

data: {
    items: [
      { id: 1, username: 'che', firstName: 'cheikh', group: 2 },
      { id: 1, username: 'lam', firstName: 'lamine', group: 1 },
      { id: 1, username: 'abd', firstName: 'abdoulaye', group: 1 },
      { id: 1, username: 'dem', firstName: 'demba', group: 3 },
      { id: 1, username: 'fat', firstName: 'fatou', group: 2 },
      { id: 1, username: 'pen', firstName: 'penda', group: 2 },
      { id: 1, username: 'olym', firstName: 'oly', group: 1 },
      { id: 1, username: 'aic', firstName: 'aicha', group: 1 },
    ]
  },
  computed: {
    // a computed getter
    filteredLastItem: function() {

      // filtering based upon group 1 items...
      let getLastItem = this.items.filter(item => { return item.group == 1 })

      // fetching the last item...
      return getLastItem[getLastItem.length -1]
    }
  }

签入html标记的步骤

<p>
  {{filteredLastItem}} 
</p>


{{filteredLastItem}}

首先，您可以定义一个计算属性，用于获取
组===1的项目

computed: {
  group1 () {
    return this.items.filter(item => {
       item.group === 1
    })
  }
}

然后，您可以在需要时获取此计算属性的最后一个值：

this.group1[this.group1.length - 1]

这应该行得通

var users = new Vue({
   el: '#get-users',
   data: {
      items: [
         { id: 1, username: 'che', firstName: 'cheikh', group: 2 },
         { id: 1, username: 'lam', firstName: 'lamine', group: 1 },
         { id: 1, username: 'abd', firstName: 'abdoulaye', group: 1 },
         { id: 1, username: 'dem', firstName: 'demba', group: 3 },
         { id: 1, username: 'fat', firstName: 'fatou', group: 2 },
         { id: 1, username: 'pen', firstName: 'penda', group: 2 },
         { id: 1, username: 'olym', firstName: 'oly', group: 1 },
         { id: 1, username: 'aic', firstName: 'aicha', group: 1 }
      ]
   },
   methods: {
      filteredUsersByGroup: function(group_value){
         var filtered = this.items.filter(function(user){
            return user.group == group_value;
         });
         return filtered[filtered.length-1]
      },
      filteredUsersByUsername: function(username_value){
         var filtered = this.items.filter(function(user){
            return user.group.toLowerCase().indexOf(username_value.toLowerCase())>=0;
         });
         return filtered[filtered.length-1]
      }
   }
})

您也可以使用
computed:{}