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

Posted 2023-02-23

【中文标题】组件渲染时Vue JS计算属性尚不可用

【英文标题】：Vue JS computed property not available yet when component renders

【发布时间】：2019-08-28 12:17:12

【问题描述】：

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

但是在渲染组件时计算属性尚不可用，这会在计算属性上引发错误："error during evaluation"

如果我注释掉 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();

【参考方案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);

【讨论】：

当我添加这个时，我得到这个错误 [ 渲染错误：“TypeError：无法读取未定义的属性 'filteredItems'”]。似乎“prospectsTable”引用尚不可用。