Attempting to utilize the new Nuxt.js Fetch method has presented an issue. Initially, everything seemed to be working properly. However, I noticed that the data is only fetched and displayed upon refreshing the page. When accessing the page through $fetchState.error being true, the data fails to fetch altogether.
I am unsure of what mistake I might have made in this scenario.
<template>
<main>
<div>
<div>
<p v-if="$fetchState.pending">
Fetching vehicles...
</p>
<p v-else-if="$fetchState.error">
Error while fetching vehicles
</p>
<div
v-for="(vehicle, index) in usedVehicles"
v-else
:key="index"
>
<nuxt-link :to="`cars/${vehicle.Id}`">
{{ vehicle.Make }}
</nuxt-link>
</div>
</div>
<button @click="$fetch">Refresh Data</button>
</div>
</main>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
usedVehicles: []
}
},
async fetch() {
const { data } = await axios.get(
'https://random.com/api'
)
// `todos` has to be declared in data()
this.usedVehicles = data.Vehicles
},
methods: {
refresh() {
this.$fetch()
}
}
}
</script>