Блог

Я хочу вызвать метод при загрузке страницы. Пока что я вызываю метод при нажатии, но когда я пытаюсь использовать 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>
  

Я пытаюсь установить mounted следующим образом

 mounted: function() {
    this.getImagesByExchange() // Calls the method before page loads
},
  

Но он продолжает давать сбой. Я предполагаю, что проблема в том, как получить доступ к ключу, но не уверен.

Если selectedExchangeId значение уже не задано, вы могли бы получить первый элемент profileExchanges массива и передать id в getImagesByExchange функцию:

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

Редактировать

Еще раз взглянув на ваш код, можно предположить, что на данный момент у компонента mounted profileExchanges свойство , возможно, еще не установлено. Один из способов справиться с этим — вызвать их оба внутри created следующим образом:

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