javascript - 页面重新加载时Vue getter返回未定义
问题描述
我有一个博客,里面有一些帖子。当您单击预览时,您将重定向到页面帖子。在帖子的页面上,我使用 getter 加载正确的帖子(我使用find
函数返回object.name
对应于对象数组中的正确对象)。
const state = {
ricettario: [], // data that contains all recipes (array of objects)
}
const actions = {
// Bind State and Firestore collection
init: firestoreAction(({ bindFirestoreRef }) => {
bindFirestoreRef('ricettario', db.collection('____').orderBy('data'))
})
const getters = {
caricaRicetta(state) {
console.log('Vuex Getter FIRED => ', state.ricettario)
return nameParamByComponent => state.ricettario.find(ricetta => {
return ricetta.name === nameParamByComponent
})
}
}
在组件中,我在computed property
computed: {
...mapGetters('ricettaStore', ['caricaRicetta']),
ricetta() {
return this.caricaRicetta(this.slug) // this.slug is the prop of the URL (by Router)
}
}
一切都以正确的方式进行,但是当我在 POST PAGE 中重新加载页面时,getter 将触发 2 次:
1. 因为状态为空而返回错误
2. 返回正确的对象
// 下面的屏幕
因此,从正面看一切正常,但在控制台和应用程序中却完全不行。
我认为正确的方法是在created
钩子中调用 getter。我要改变什么?计算的道具、吸气剂或状态有问题吗?
发布页面:
<template>
<div v-if="ricetta.validate === true" id="sezione-ricetta">
<div class="container">
<div class="row">
<div class="col s12 m10 offset-m1 l8 offset-l2">
<img
class="img-fluid"
:src="ricetta.img"
:alt="'Ricetta ' + ricetta.titolo"
:title="ricetta.titolo"
/>
</div>
</div>
</div>
</div>
<div v-else>
...
</div>
</template>
解决方案
您正在尝试validate
未定义的属性。所以你需要先检查ricetta
。
试试这样:
<div v-if="ricetta && ricetta.validate === true" id="sezione-ricetta">
推荐阅读
- curl - 尽管来自 InfluxDB 的 curl 响应是 HTTP 200,但系列没有被删除
- python - 如何通过理解实现从这个循环到列表的计数器?
- mysql - 如何避免在 MySQL 中的 alter table add column 上出现重复的列名?
- python - 如何查找在while循环中生成的整数的总和
- delphi - TDBGrid 复制行
- java - 如何使用java中的节点编写toString方法
- python - 打开图片文件 python2 open.read 和 python3 open.read 有什么不同
- css - 移除新的 Firefox 自动填充颜色
- database - 在一个数据库中存储大量文档与在不同数据库之间拆分它们对性能有何影响?
- java - 使用 javax.ws.rs.client.WebTarget 设置连接超时