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

Question

我有一个 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 },
    ]
  }
})

项目列表按添加日期排序(此处不出现)。所以我想按 group 过滤项目并获取最后一个值。在这里，如果我按组过滤:1，我应该有

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

Answer 1

这里我使用 vue compated 来过滤第 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>