[Vuejs]-Hiding Rows After a Certain Limit of Rows Has Been Updated

by

0👍

✅

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>

Leave a comment