Javascript 当页面加载VUE时的Onload方法

我想在加载页面时调用该方法。到目前为止，我在单击时调用该方法，但是当我尝试使用mounted自动调用该方法时，它总是失败，您有什么建议吗

代码如下：

<template>
  <div>
    <AppHeader></AppHeader>
    <div style="display: flex">
      <ul>
        <li
          style="cursor: pointer"
          v-for="exchange of profileExchanges"
          :key="exchange.id"
          @click="getImagesByExchange(exchange.id)"
        >
          <div style="padding: 20px; border: solid 2px red">
            <h3>Brand: {{exchange.brand}}</h3>
            <p>Description: {{exchange.description}}</p>
            <p>Category: {{exchange.category}}</p>
          </div>
        </li>
      </ul>
      <div>
        <span style="margin: 10px" v-for="url of exchangeImageUrls" :key="url">
          <img width="250px" :src="url" />
        </span>
      </div>
    </div>

    <br />
  </div>
</template>

<script>

import AppHeader from '@/components/Header5'
export default {
  components: {
    AppHeader
  },
  created() {
    this.$store.dispatch('exchange/getExchangesByProfile', this.$store.state.auth.user.profile.user)
  },
  data() {
    return {
      selectedExchangeId: '',
      exchanges: []
    }
  },
  computed: {
    user() {
      return this.$store.state.auth.user
    },
    profile() {
      return this.user.profile || {}
    },
    profileExchanges() {
      return this.$store.getters['exchange/profileExchanges']
    },
    exchangeImageUrls() {
      return this.$store.getters['exchange/imageUrls']
    }
  },
  methods: {
    getImagesByExchange(exchangeId) {
      this.$store.dispatch('exchange/getImagesByExchange', exchangeId)
    },
    getListings() {

    },
    updateProfile(profile, closeModal) {
      this.$store.dispatch('auth/updateProfile', profile)
        .then(_ => {
          closeModal()
        })
    }
  }   
}

</script>

---

但它一直在失败。我想问题在于如何访问密钥，但不确定。

如果尚未设置

选择的交换id

，您可以获取

ProfileExchange

数组的第一个元素，并将

id

传递给

getImagesByExchange

函数：

mounted() {
    this.getImagesByExchange(this.profileExchanges[0].id) // Calls the method before page loads
},

编辑

再次查看您的代码，您可能会认为，在组件装入时，

profileExchanges

属性可能尚未设置。处理此问题的一种方法是在创建的

中调用这两个函数，如下所示：

async created() {
    await this.$store.dispatch(
       'exchange/getExchangesByProfile',
        this.$store.state.auth.user.profile.user
    );
    
    if (this.profileExchanges && this.profileExchanges.length) {
        this.getImagesByExchange(this.profileExchanges[0].id);
    }
}

this.getImagesByExchange（）
需要一个参数
exchangeId
。在调用
getImagesByExchange
并获取
exchangeId
之前，您需要确保调用
getExchangesByProfile
，您好，谢谢您的回复，您能给出它的示例或代码吗？你是说这个挂载的：function（）{this.getExchangesByProfile（）this.getImagesByExchange（exchange.id）//在页面加载之前调用该方法}，我尝试使用这个。$vnode.key作为参数，但仍然不起作用。我插入了exchangeId，但没有定义它。getImagesByExchange（exchangeId）hi Hatef，感谢您提供的信息hmmm我尝试了yoir建议，到目前为止它仍然无法调用getImagesByExchange挂载（）{this.getImagesByExchange（this.profileExchanges[0].id）//在页面加载之前调用该方法}，但感谢您的响应。Hmm，您能用组件的最新版本更新您的问题吗？@alfazaid请查看编辑。希望有帮助：）
async created() {
    await this.$store.dispatch(
       'exchange/getExchangesByProfile',
        this.$store.state.auth.user.profile.user
    );
    
    if (this.profileExchanges && this.profileExchanges.length) {
        this.getImagesByExchange(this.profileExchanges[0].id);
    }
}