Vue.js新手求助：页面加载早于Axios GET响应致值未定义问题

Hey there! I see you're running into a common async data loading issue in Vue—your page finishes rendering before your Axios requests complete, leading to those annoying "value undefined" errors. Let's break down how to fix this step by step.

First, Clean Up Your Async Function Syntax #

Your current getConfig and getAlarmStatus methods mix await with .then(), which is redundant and can lead to unexpected behavior. Let's simplify them using try/catch for cleaner error handling:

// Updated mixin.js methods
async getConfig() { 
  try {
    const res = await axios.get('http://10.10.10.10/multi_get.json?c0=config');
    this.config = res;
    this.$store.commit("setConfigData", this.config);
  } catch (err) {
    console.log(err);
  }
}, 
async getAlarmStatus() { 
  try {
    const res = await axios.get('http://10.10.10.10/multi_get.json?c0=alarm_status');
    this.alarm_status = res;
    this.$store.commit("setAlarmData", this.alarm_status);
  } catch (err) {
    console.log(err);
  }
},

Using await directly gives you the response without needing .then(), and try/catch makes error handling more straightforward.

Ensure fillElements Runs After Data Loads #

Right now, you're not triggering fillElements once your async requests finish. Modify your firstTimeRun method to call it only after both data sets are ready:

async firstTimeRun() { 
  await this.getConfig(); 
  await this.getAlarmStatus();
  // Now both config and alarm_status are populated—safe to call fillElements
  this.fillElements(); 
},

This guarantees fillElements has access to the loaded data when it runs.

Add Conditional Rendering to Your Template #

Even with the above fixes, it's smart to prevent Vue from rendering elements that depend on unloaded data. Use v-if to check if your data exists first:

<!-- In your main.vue template -->
<template>
  <div v-if="config && alarm_status">
    <!-- All elements that rely on config or alarm_status go here -->
  </div>
  <div v-else>
    Loading data... <!-- Show a friendly loading state while waiting -->
  </div>
</template>

This stops Vue from trying to render elements with undefined values, eliminating those errors entirely.

Optional: Switch to the created Lifecycle Hook #

While beforeMount works, you could use the created hook to start your requests earlier (it runs as soon as the Vue instance is initialized, before DOM mounting):

// In main.vue
created() { 
  this.firstTimeRun(); 
},

This won't fix the async timing issue on its own, but it gives your requests a head start to load faster.

That should resolve your undefined value errors! Let me know if you hit any other snags.

内容的提问来源于stack exchange，提问作者Evgeny