Внутренний класс рассматривается как атрибут класса Outer. Следовательно, независимо от того, какая переменная экземпляра класса Inner является частной или нет, Outer-класс может получить доступ без каких-либо проблем, как доступ к другим его частным атрибутам (переменным).
class Outer{
private int a;
class Inner{
private int b=0;
}
void outMethod(){
a = new Inner().b;
}
}
Так что это тот случай, когда имеет смысл отделить ваши данные от слоя просмотра. Обращаться к обновлениям проще, если у вас есть единственный источник правды, который вы обновляете, вместо того, чтобы пытаться обновлять свои блоки напрямую.
Итак, когда вы получаете обновление, снимите его с this.flights.data
вместо чанка, а затем заставьте vue пересчитать ваши чанки. Это сохраняет ваш исходный массив data
в качестве единственного источника истины, и вы каждый раз обновляете фрагменты из него для своего просмотра.
О, я вижу, что 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>