- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 Vue 的异步操作来进行 API 调用。我遇到的问题是数据返回得不够快。该方法会继续执行,而不等待操作数据返回。第一次调用时,this.lapNumber 未定义。第二次尝试按预期工作。
我用“this.getRound(findRound);”调用该操作在下面的方法中
getRaceInfo(date) {
let showModal = false;
let findRaceName = '';
let findCircuitName = '';
let findRound = '';
let findLapNum = '';
// iterate through each race to match date of current
this.allRaces.forEach(el => {
if (el.date != date) {
return;
} else {
// if date match then give variables values
findRaceName = el.raceName;
findCircuitName = el.Circuit.circuitName;
findRound = el.round;
this.fetchRoundResults(findRound);
console.log('after fetch');
findLapNum = this.lapNumber;
showModal = true;
}
});
// assign the variables to corresponding data properties
this.raceName = findRaceName;
this.circuitName = findCircuitName;
this.roundNum = findRound;
this.lapNum = findLapNum;
return showModal ? (this.isModalVisible = true) : '';
},
调用的操作是:
async fetchRoundResults({ commit }, roundNum) {
try {
const response = await axios.get(`http://ergast.com/api/f1/current/${roundNum}/results.json`);
const roundInfo = response.data.MRData.RaceTable.Races[0];
await commit('set_round_results', roundInfo);
console.log('set result');
return response;
} catch (e) {
console.log(e);
}
},
};
在控制台中,这是基于控制台日志运行的内容:
after fetch
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property '0' of undefined"
found in
---> <RaceCalendar> at src/components/Calendar.vue
<App> at src/components/Dashboard.vue
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6911
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property '0' of undefined
at lapNumber (raceCalendar.js?8f5d:13)
at wrappedGetter (vuex.esm.js?2f62:762)
at Vue.eval (vuex.esm.js?2f62:95)
at Watcher.get (vue.runtime.esm.js?2b0e:4473)
at Watcher.evaluate (vue.runtime.esm.js?2b0e:4578)
at Vue.computedGetter [as lapNumber] (vue.runtime.esm.js?2b0e:4830)
at Object.get [as lapNumber] (vuex.esm.js?2f62:564)
at VueComponent.mappedGetter (vuex.esm.js?2f62:900)
at Watcher.get (vue.runtime.esm.js?2b0e:4473)
at Watcher.evaluate (vue.runtime.esm.js?2b0e:4578)
set result
如果再次运行,不会出现未定义的错误,但在该方法继续执行之前,数据仍然不会被“设置”。
after fetch
set result
任何帮助将不胜感激!
谢谢:)
最佳答案
用此更改您的 getRaceInfo
方法
async getRaceInfo(date) {
let showModal = false;
let findRaceName = '';
let findCircuitName = '';
let findRound = '';
let findLapNum = '';
// iterate through each race to match date of current
for await (let el of this.allRaces) {
if (el.date != date) {
return;
} else {
// if date match then give variables values
findRaceName = el.raceName;
findCircuitName = el.Circuit.circuitName;
findRound = el.round;
await this.$store.dispatch('fetchRoundResults',findRound)
console.log('after fetch');
findLapNum = this.lapNumber;
showModal = true;
}
}
// assign the variables to corresponding data properties
this.raceName = findRaceName;
this.circuitName = findCircuitName;
this.roundNum = findRound;
this.lapNum = findLapNum;
return showModal ? (this.isModalVisible = true) : '';
},
关于javascript - Vuex - 调用异步函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60015217/
我刚刚开始使用 Vuex,但遇到了问题(这可能是我的一些无能为力的语法错误)。我有一个用户喜欢 like_items 并且有一个网络调用,它与一个项目不同。 mutations: { SET_TOGG
我刚开始在这里学习 Vuex。到目前为止,我一直将共享数据存储在 store.js 中。文件和导入store在每个模块中,但这越来越烦人,我担心会发生变异。 我正在努力解决的是如何使用 Vuex 从
我正在创建一个使用 Fabric.js 来管理 Canvas 的 Vue 应用程序。 我想使用 Vuex 管理 Canvas 状态。为此,我将 fabric canvas 实例设置为 vuex 状态变
我正在构建一个 Nuxt 应用程序,我正在从我在本地主机上运行的节点后端获取一些数据。 我有一个插件 getApps.js export default ({ store }) => { st
我想安装 Vuex 但出现错误。 // error npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree
我使用 vuex-persistedstate 包( https://github.com/robinvdvleuten/vuex-persistedstate )在浏览器上保持数据状态。 我使用 A
假设我有一个简单的 Vuex 状态来保存食谱: const state = { recipe: { id: '', name: "", ingr
目前,我有一个具有 2 个状态属性的商店 - 版本和冠军 + 2 个发出 GET 请求然后提交到状态的操作。第二个 GET 请求 URL 需要包含我从第一个 GET 请求获取的版本,如下所示: axi
我有一个基于 Vue 和 Vuex 的小应用程序。它只是一个包含类似项目的表格 {{ item.name }} Edit Items 数组是使用 getter 从
我有一个 Vuex getter,我从应用程序中的各个组件调用它。但是,我发现在调用 getter 之前需要稍微复杂一些的逻辑,所以我使用了 Vuex Action。如何使用操作中的参数调用 gett
为什么会出现此错误: Error [vuex] Do not mutate vuex store state outside mutation handlers. 这是什么意思? 当我尝试输入编辑输入
在 Nuxt 文档(here)中,它说“您可以选择将模块文件分解为单独的文件:state.js、actions.js、mutations.js 和 getters.js。” 我似乎找不到任何示例来说明
我正在使用 TypeScript 构建一个简单的 vue 项目。我在我的 vue 项目中编写了 vuex 商店,该商店有一个名为“计算”的子模块。但是一旦创建了包含子模块的主存储,就会发生奇怪的错误(
我完全熟悉 Vuex,但我对 Vue 组合 API 一无所知。这到底是怎么回事,它和Vuex有什么区别?它涵盖了 Vuex 中的哪些差距,以及何时何地使用它们更好? 感谢您的帮助。 最佳答案 首先,
简短的问题:是否可以通过 Nuxt Auth 模块手动更新 Vuex 中的用户数据? 为什么我有这个问题:我的问题是这个。我在用户文档中的 MongoDB 中保存了一些 Likes/Follows。我
尝试将带有 vuex-module-decorators 的存储模块加载到初始化程序中时出现此错误: vuex.esm.js?2f62:261 Uncaught TypeError: Cannot r
我有一个 VueX 商店,有两个模块,user.js 和merchant.js,顶层是index.js。 user.js 中的 getter 是: 重构 const getters = { s
我在我的代码库中偶然发现了这个错误,并试图看看是否有人可以修复它。 以下是我的 listings/actions.js export const fetchFeaturedListings = ({
我正在尝试将 Vuex 与 Vue 3 一起使用。这是我在 main.js 中的代码: import { createApp } from 'vue'; import App from './App.
我在我的代码库中偶然发现了这个错误,并试图看看是否有人可以修复它。 以下是我的 listings/actions.js export const fetchFeaturedListings = ({
我是一名优秀的程序员,十分优秀!