У меня есть приложение Laravel / Vue JS , которое включает в себя компонент карты Google, а также компонент Vuetify data-table .Экземпляр Vue также имеет вычисляемое свойство, которое вычисляет точки для карты Google, которая основана на другом вычисленном свойстве, рассчитанном по таблице Vuetify data .
Код компонента Vue в блейде вида:
<v-data-table :ref="model + 'Table'" v-model="selected" :headers="headers" :items="collection" :pagination.sync="pagination" select-all item-key="id" class="elevation-1" >
</v-data-table>
<google-map v-if="mapPoints.length" class="google-map" :markers="mapPoints"></google-map>
Код экземпляра Vue:
var app = new Vue({
el: '#app',
mixins: [ crudFunctionsMixin, adminLayoutMixin ],
data: () => ({
}),
computed: {
mapPoints: function() {
return this.calcPoints(this.$refs.prospectTable.filteredItems);
}
},
methods: {
calcPoints(items) {
let myPts = [];
let i = 0;
items.forEach(function(prospect) {
if(prospect.latitude && prospect.longitude) {
myPts.push({
id: prospect.id,
position: {
lat: prospect.latitude,
lng: prospect.longitude
},
index: i++,
title: prospect.address + ", " + prospect.city + ", " + prospect.zip,
icon: "\/img\/numberedMapIcons\/number_" + prospect.id + ".png"
});
}
});
return myPts;
}
}
});
Это не 'т работа.Выдает ошибку типа:
TypeError: Невозможно прочитать свойство 'FilterItems' с неопределенным
Это потому, что вычисленное свойство FilterItems в Компонент Vuetify data-table еще не был рассчитан во время его оценки компонентом GoogleMap.
Если я закомментирую компонент GoogleMap, который использует вычисленное свойство points, и оцените свойство points, используя Vue JS Devtools после рендеринга страницы, данные свойства points рассчитываются правильно.Это связано с тем, что вычисляемое свойство не оценивается в первый раз, пока вы не получите к нему доступ с помощью Devtools, поэтому страница уже обработана.Таким образом, вычисляемое свойство "points" оценивается нормально после рендеринга страницы, но в то время, когда компоненты GoogleMap пытаются сначала вычислить его.
Затем я попытался изменить вычисляемое свойство "points" для возврата пустого массива, если "$ refs.prospectTable.filteredItems" все еще не определен.
computed: {
mapPoints: function() {
if(!this.$refs.prospectTable)
return [];
else
return this.calcPoints(this.$refs.prospectTable.filteredItems);
}
}
Однако при использовании этого подхода вычисляемое свойство оценивается только один раз, до $ refs.prospectTable.filteredItems определен, поэтому он возвращает пустой массив.Вычисленное свойство никогда не оценивается снова, даже после $ refs.prospectTable.filteredItems изменений.
Почему вычисляемое свойство mapPoints не пересчитывается каждый раз "$refs.prospectTable.filteredItems "изменяется, как если бы он никогда не возвращал исходный пустой массив?
computed: {
mapPoints: function() {
return this.calcPoints(this.$refs.prospectTable.filteredItems);
}
}
ОБНОВЛЕНИЕ:
По совету @larizzatg, изменение mapPoints из вычисляемого свойства в переменную $ watch внутри mount () добились цели:
mounted() {
this.$watch(
() => {
return this.$refs.prospectTable.filteredItems;
},
(items) => {
this.mapPoints = this.calcPoints(items);
}
);
}