gpt4 book ai didi

javascript - Vue JS 计算属性不重新计算

转载 作者:行者123 更新时间:2023-12-02 23:30:21 28 4
gpt4 key购买 nike

我有一个 Laravel/Vue JS 应用程序,它集成了 google map 组件和 Vuetify 数据表 组件。 Vue 实例还有一个计算属性,用于计算 Google map 的点,该属性基于 Vuetify 数据表 计算的另一个计算属性。

View Blade 中的 Vue 组件代码:

    <v-data-table :ref="model + 'Table'" v-model="selected" :headers="headers" :items="collection" :pagination.sync="pagination" select-all item-key="id" class="elevation-1" >         
</v-data-table>

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

Vue实例代码:

var app = new Vue({
el: '#app',
mixins: [ crudFunctionsMixin, adminLayoutMixin ],
data: () => ({
}),
computed: {
mapPoints: function() {
return this.calcPoints(this.$refs.prospectTable.filteredItems);
}
},
methods: {
calcPoints(items) {
let myPts = [];
let i = 0;

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

return myPts;
}
}
});

这行不通。它抛出类型错误:

TypeError: Cannot read property 'filteredItems' of undefined

这是因为在 GoogleMap 组件评估时,Vuetify data-table 组件中的 filteredItems 计算属性尚未计算出来。

如果我注释掉使用“点”计算属性的GoogleMap组件,并在页面渲染后使用Vue JS Devtools评估点属性,则点属性数据计算正确。这是因为计算属性在您使用 Devtools 访问它之前不会被第一次评估,因此页面已经呈现。因此,“points”计算属性在页面渲染后评估良好,但在 GoogleMap 组件尝试首先计算它时。

<小时/>

如果“$refs.prospectTable.filteredItems”仍然未定义,我接下来尝试修改“points”计算属性以返回空数组。

computed: {
mapPoints: function() {
if(!this.$refs.prospectTable)
return [];
else
return this.calcPoints(this.$refs.prospectTable.filteredItems);
}
}

但是,使用此方法,计算属性仅在定义 $refs.prospectTable.filteredItems 之前计算一次,因此它返回空数组。即使在 $refs.prospectTable.filteredItems 更改之后,计算属性也不会再次计算。

<小时/>

为什么每次“$refs.prospectTable.filteredItems”发生变化时,“mapPoints”计算属性不会像它从未返回初始空数组时那样重新计算?

computed: {
mapPoints: function() {
return this.calcPoints(this.$refs.prospectTable.filteredItems);
}
}
<小时/>

更新:

根据 @larizzatg 的建议,将 ma​​pPoints 从计算属性更改为 mounted() 内的 $watch 变量就可以解决问题:

mounted() {
this.$watch(
() => {
return this.$refs.prospectTable.filteredItems;
},
(items) => {
this.mapPoints = this.calcPoints(items);
}
);
}

最佳答案

创建 vue 应用程序时,将执行计算属性。此时,应用程序在真实 dom 中没有该组件(ref 关键字的功能类似于 getElementById,因为 prosectTable 未定义,您将获得未定义)

在已安装的生命周期中,组件位于 dom 中,因此您可以访问引用。将观察者添加到引用前景表中,而不是计算属性

关于javascript - Vue JS 计算属性不重新计算,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56532170/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com