如何在javascript中将对象撤消为第一个块，并将最老块移动到新块？
如何在javascript中将对象撤消为第一个块，并将最老块移动到新块？
提问于 2019-02-27 21:24:01
我有一些数据，每次从pusher检索新数据时都必须更新。我使用Vue.js进行活动，并防止每次事件被触发时从服务器重新加载所有内容。
我需要根据这种情况更新我的数组。
/**
*
* 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...
*/请看我的代码，每页必须显示最多4个数据。一旦事件被触发，它就会进行更新，但是它会一直更新到底部，直到页面被刷新。
<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>回答 2
Stack Overflow用户
回答已采纳
发布于 2019-02-28 00:06:42
因此，在这种情况下，将数据与视图层分离是有意义的。它使处理更新更容易，如果您有一个单一的真相来源，您更新，而不是试图直接更新您的块。
因此，当您得到更新时，将其解压缩为this.flights.data而不是块，然后使vue重新计算您的块。这使原始的data数组保持为您唯一的真实来源，并且每次您的视图都会从它中更新块。
Stack Overflow用户
发布于 2019-02-28 00:21:08
哦，我看到frodo2975捕捉到您正在解转换为计算值，而不是数据。我没注意到。这符合您的意愿：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54914721
复制相关文章
相似问题
腾讯云开发者
