Hiding Rows After a Certain Limit of Rows Has Been Updated - vue.js

Question

I'm new to coding with a very basic understanding to Javascript. I created a table that will push an update to my tables upon clicking a button. However, i do want to limit the number of rows within my table. say for example upon pushing the sixth data to the table, i do want the first data to be removed from the row.
I tried searching everywhere with no luck. Maybe it's because my basic understand to javascript is pretty basic. Im a newbie haha. I am using vue.js for this code.
HTML
<form class="form-inline">
<div class="form-group mx-sm-3 mb-2">
<input
type="number"
v-model="newElement.buy"
class="form-control">
</div>
<button
v-on:click="buyStock"
type="button"
class="btn btn-success mb-2">BUY
</button>
</form>
<section class="stock_tables">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">{{codeBuy}}</th>
<th><a v-html="negative"></a> Buy</th>
</tr>
</thead>
<tbody>
<tr v-for="u in stocks">
<th></th>
<td>{{u.buy}}</td>
</tr>
</tbody>
</table>
</section>
Script
<script>
new Vue({
el: '#app',
data: {
codeBuy: "12345",
stocks: [],
newElement: {buy:"",sell:""}
},
methods: {
buyStock: function(){
this.stocks.push({buy:this.newElement.buy});
this.newElement = {buy:""};
}
}
});
</script>
So basically everytime i enter the amount of the stocks and press buy it will update.

Answer 1

You have some options to modify the buyStock method:
this.stocks.shift()
this.$delete(this.stocks, 0)
this.stocks = this.stocks.slice(1);
this.stocks = this.stocks.slice(-5);
this.stocks = this.stocks.splice(0, 1);
or, without the if use:
this.stocks = [...this.stocks, {
buy: this.newElement.buy
}].slice(-5);
Demo below:
new Vue({
el: '#app',
data: {
codeBuy: "12345",
stocks: [],
newElement: {
buy: "",
sell: ""
},
negative: ''
},
methods: {
buyStock: function() {
this.stocks.push({
buy: this.newElement.buy
});
if (this.stocks.length > 5) {
// this.$delete(this.stocks, 0);
// this.stocks = this.stocks.slice(1);
// this.stocks = this.stocks.slice(-5);
// this.stocks = this.stocks.splice(0, 1);
this.stocks.shift();
}
//this.stocks = [...this.stocks, {
// buy: this.newElement.buy
//}].slice(-5);
this.newElement = {
buy: ""
};
}
}
});
<script src="https://unpkg.com/vue"></script>
<div id="app">
<form class="form-inline">
<div class="form-group mx-sm-3 mb-2">
<input type="number" v-model="newElement.buy" class="form-control">
</div>
<button v-on:click="buyStock" type="button" class="btn btn-success mb-2">BUY</button>
</form>
<section class="stock_tables">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">{{codeBuy}}</th>
<th><a v-html="negative"></a> Buy</th>
</tr>
</thead>
<tbody>
<tr v-for="u in stocks">
<th></th>
<td>{{u.buy}}</td>
</tr>
</tbody>
</table>
</section>
</div>