如何在javascript中将对象移至第一个块并将最旧的块移动到新块？

Question

I have some data and it must be updated each time the new data retrieved from pusher. I'm using Vue.js for the reactivity and prevent reloading all stuff from the server every time an event got fired.

I need to update my array regarding to this condition.

/**
 *
 * 1. prevent each array chunk to store more than 4 items
 *
 * 2. if all chunk is already contains 4 items, create a new chunk,
 * unshift new data and move oldest item to the new chunk.
 *
 * ------------ example ------------
 *
 * *  const beforeUnshift = [
 * *     0 => [7, 6, 5, 4],
 * *     1 => [3, 2, 1, 0]
 * *  ];
 *
 * *  const afterUnshift = [
 * *    0 => [8, 7, 6, 5],
 * *    1 => [4, 3, 2, 1],
 * *    2 => [0]
 * *  ];
 *
 * *  const afterSecondaryUnshift = [
 * *    0 => [9, 8, 7, 6],
 * *    1 => [5, 4, 3, 2],
 * *    2 => [1, 0]
 * *  ];
 *
 * * and so on...
 */

Please take a look at my code, each page must show maximum 4 data. It does updated once an event gets fired, but it updates all the way to the bottom until the page is refreshed.

<template>
  <div class="table-swipable" style="overflow-x: hidden;">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="flightChunk in chunkedFlights">
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th class="pl-0 pr-1 border-0 text-center fit-content">
                  <div class="bg-white shadow rounded cardy-th">Flight No.</div>
                </th>
                <th class="px-1 border-0 text-center">
                  <div class="bg-white shadow rounded cardy-th">Airlines</div>
                </th>
                <th class="px-1 border-0 text-center" colspan="2">
                  <div class="bg-white shadow rounded cardy-th">Destination</div>
                </th>
                <th class="px-1 border-0 text-center" colspan="2">
                  <div class="bg-white shadow rounded cardy-th">Departure / Arrival</div>
                </th>
                <th class="pl-1 pr-0 border-0 text-center">
                  <div class="bg-white shadow rounded cardy-th">Status</div>
                </th>
              </tr>
            </thead>
            <tbody class="font-weight-bold">
              <template v-for="flight in flightChunk">
                <tr class="bg-white shadow fit-content">
                  <td class="border-0 py-4 pl-4 rounded-left">
                    <i class="fas fa-plane text-primary mr-3"></i>
                    #{{ flight.id }}
                  </td>
                  <td class="border-0 py-4 pl-4">{{ flight.airline.name }}</td>
                  <td class="border-0 py-4 pl-4 text-center">{{ flight.origin.city }}</td>
                  <td class="border-0 py-4 pl-4 text-center">{{ flight.destination.city }}</td>
                  <td class="border-0 py-4 pl-4 text-center">{{ flight.departure | removeSecond }}</td>
                  <td class="border-0 py-4 pl-4 text-center">{{ flight.arrival | removeSecond }}</td>
                  <td
                    class="border-0 py-4 pl-4 text-primary rounded-right text-center"
                  >{{ flight.status ? flight.status : 'Awaiting confirmation' }}</td>
                </tr>
                <tr class="tr-spacer"></tr>
              </template>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import moment from "moment";

export default {
  data() {
    return {
      flights: {}
    };
  },
  computed: {
    chunkedFlights() {
      return _.chunk(this.flights.data, 4);
    }
  },
  created() {
    Echo.channel("flight-created").listen("FlightCreated", ({ flights }) => {
      this.chunkedFlights[0].unshift(flights[0]);
      this.$forceUpdate();
    });
  },
  filters: {
    removeSecond(time) {
      if (!time) return "";
      return moment(time).format("hh:mm");
    }
  },
  updated() {
    var tableSwipable = new Swiper(".table-swipable", {
      centeredSlides: true,
      slidesPerView: 1,
      spaceBetween: 60,
      autoplay: {
        delay: 30000
      }
    });
  },
  mounted() {
    axios.get("/flights/public").then(response => {
      this.flights = response.data;
    });
  }
};
</script>

Answer 1

So this is a case where it makes sense to separate your data from your view layer. It makes it easier to deal with updates if you have a single source of truth that you update, instead of trying to update your chunks directly.

So, when you get an update, unshift it into this.flights.data instead of a chunk, then make vue recalculate your chunks. This keeps your original data array as your single source of truth, and you update the chunks from it each time for your view.

Answer 2

Oh, I see that frodo2975 caught that you were unshifting into a computed value rather than into your data. I didn't notice that. This works as you intend:

 new Vue({ el: '#app', data: { flights: [ 7, 6, 5, 4, 3, 2, 1, 0 ] }, computed: { chunkedFlights() { return _.chunk(this.flights, 4); } }, mounted() { setTimeout(() => { this.flights.unshift(8); }, 2000); } }); 

 #app { display: grid; grid-gap: 2rem; background-color: black; padding: 0.6rem; } .page { background-color: #ffe; padding: 0.6rem; grid-gap: 0.2rem; display: grid; } .row { background-color: blue; color: white; padding: 0.6rem; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="chunk in chunkedFlights" class="page"> <div v-for="flight in chunk" class="row"> {{flight}} </div> </div> </div>