获取VueJS数组的最后一个元素

Question

我正在制作一个小的VueJS webapp。我想将数组中的数据输出到视图，但它必须是数组的最后一项，并且在该最后一项中，第二项为a，例如等于39。我不知道如何获取那个。

HTML

<p>The last number in the array (a) is {{userLastCount}} </p>

JavaScript/Vue

data () {
    return {

        event: 'Custom event',
        userLastCount: 0,


        lineData: [
            { time: '2017-05-01 15:00', a: 0 },
            { time: '2017-05-01 16:00', a: 12 },
            { time: '2017-05-01 17:00', a: 23 },
            { time: '2017-05-01 18:00', a: 28 },
            { time: '2017-05-01 19:00', a: 39 },
        ]

    }
},

components: {
    DonutChart, BarChart, LineChart, AreaChart
},

created() {
    this.userLastCount = //equal to 39
}

我想要输出lineData对象中'a'的最后一个值并将其赋值给数据字符串，以便我可以将其输出到视图。所以现在最后一个'a'是39。但是如果我在对象中添加另一行，则必须将其分配给this.userLastCount。

- Giesburts

Answer 1

数组的最后一个元素是 arr[arr.length - 1]。你可以使用一个computed，为你始终设置该值，而不是自己维护数据项：

computed: {
  userLastCount() {
    return this.lineData[this.lineData.length - 1].a;
  }
}

- Roy J

---

我需要获取数组中特定的'a'。因此不是整个项目，而只有'39'。我将在我的问题中更具体。 - Giesburts

太棒了！一直在折腾，然而答案是如此简单。谢谢 :) - Giesburts

Answer 2

你可以使用纯JavaScript来实现这个功能

在你的created()钩子函数中，按照以下步骤进行：

created(){
   //get the position of last object in the array.
    var lastPosition = this.lineData.length -1;

    this.userLastCount = this.lineData[lastPosition].a;
} 

- Vamsi Krishna