Question

我正在使用 Vue JS 构建页面。在Vue实例中，我具有一个计算属性，该属性构建地图点数组，然后是页面中的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条件渲染地图。

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

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

1 个答案: