Вычисленное свойство Vue JS еще не доступно при рендеринге компонента - PullRequest
Новая
       18

Вычисленное свойство Vue JS еще не доступно при рендеринге компонента

1 голос
/ 07 апреля 2019

Я создаю страницу, используя 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 && 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 Ответ

0 голосов
/ 07 апреля 2019

Несколько вещей, которые вы можете попробовать:

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);
}
...