Блог

Я создаю страницу, используя Vue JS. В экземпляре Vue у меня есть вычисляемое свойство, которое создает массив точек карты, а затем компонент Vue на странице, который использует вычисляемое свойство, вычисленное в корневом экземпляре.

Однако вычисляемое свойство еще недоступно во время визуализации компонента, что приводит к ошибке в вычисляемом свойстве: «ошибка во время оценки»

Если я закомментирую компонент Vue, вычисляемое свойство вычисляется правильно.

Однако с добавлением компонента вычисляемое свойство еще недоступно, и я получаю следующую ошибку: «Не удается прочитать свойство undefined»

 <google-map class="google-map" :markers="points"></google-map>
  

 window.Vue = require('vue');

import Vuetify from 'vuetify';

Vue.use(Vuetify);

import { crudFunctionsMixin } from './mixin-crud-functions.js';

Vue.component('google-map', require('../GoogleMaps/GoogleMap').default);

var app = new Vue({
    el: '#App',
    mixins: [ crudFunctionsMixin ],
    data: () => ({
        model: "prospect",
        modelName: "Prospect",
        modelNamePlural: "Prospects",
        pagination: {
            sortBy: 'name'
        },
        headers: [
            { text: 'ID', value: 'id', sortable: true },
            { text: 'Name', value: 'name', sortable: true },
            { text: 'Food Category', value: 'foodcat_id', sortable: true },
            { text: 'Contact', value: 'contact_lname', sortable: true },
            { text: 'Admin Comments', value: 'response_notes', sortable: true },
            { sortable: false }
        ]
    }),
    computed: {
        tblFilteredItems: function() {
            return this.$refs.prospectsTable.filteredItems;
        },
        points: function() {
            return this.calcPoints(this.$refs.prospectsTable.filteredItems);
        }
    },
    methods: {
        calcPoints(items) {
            let myPts = [];

            items.forEach(function(prospect) {
                if(prospect.latitude amp;amp; prospect.longitude) {
                    myPts.push({
                        id:     prospect.id,
                        position: {
                            lat: prospect.latitude,
                            lng: prospect.longitude
                        },
                        title:  prospect.address   ", "   prospect.city   ", "   prospect.zip,
                        icon:   "/img/numberedMapIcons/number_"   prospect.id   ".png"
                    });
                }
            });

            return myPts;
        },

        fetch() {
            $.get(`/${this.model}/fetch`, (r) => {
                if(r.successMsg) {
                    this.collection = r.collection.data;
                }
            });
        }
    }
});
app.fetch();
  

Пара вещей, которые вы могли бы попробовать:

1. Используйте v-if для условного рендеринга карты, если у вас есть данные.

 `<google-map v-if="points.length" :markers="points" class="google-map" />`
  

• Затем вы могли бы использовать v-else для рендеринга какого-либо символа загрузки.

2: В вашем вычисляемом вы можете проверить, есть ли у вас уже данные, поскольку я предполагаю, что именно отсюда возникает ваша неопределенная проблема.

 points: function() {
  if (!this.$refs.prospectTable.filteredItems) return [];
  return this.calcPoints(this.$refs.prospectsTable.filteredItems);
}