javascript - 组件渲染时 Vue JS 计算属性尚不可用

Question

我正在使用 Vue JS 构建一个页面。在 Vue 实例中，我有一个构建 map 点数组的计算属性，然后页面中的一个 Vue 组件使用在根实例中计算的计算属性。

然而，在呈现组件时计算属性尚不可用，这会在计算属性上引发错误:“评估期间出错”

如果我注释掉 Vue 组件，则计算属性计算正确。

但是添加组件后，计算属性尚不可用，我收到以下错误:“无法读取未定义的属性”

<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();

Answer 1

一些你可以尝试的事情:

1:如果有数据，使用 v-if 有条件地渲染 map 。

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