[Mise] Refetch API data when a state value changes with the `$watch` property in Alpine JS
2021-03-05 10:27
标签：property fetch mis less rom image spinner something null In this lesson, we build a little app that fetches dog photos from the dog.ceo API, based on a "breed" search field. We want the API call to happen again when the search value changes, and to do so we use the We also use the [Mise] Refetch API data when a state value changes with the `$watch` property in Alpine JS 标签：property fetch mis less rom image spinner something null 原文地址：https://www.cnblogs.com/Answer1215/p/12900861.html$watch property from Alpine JS, which lets us define what state property we want to watch, and what callback function to run when a change happens.debounce modifier on the x-model property to avoid firing an API call on each keystroke.div x-data="dogFetcher()" x-init="init">
label>What breed?label>
input type="text" x-model.debounce.750="breed">
template x-if="fetchStatus === ‘error‘">
p class="error">There was something wrong with the API call, please try again.p>
template>
p x-show="!breed" class="prompt">Let‘s go fetch some pups!p>
div x-show="fetchStatus === ‘loading‘" class="spinner">div>
template x-if="breed && fetchStatus === ‘idle‘">
div>
template x-if="data.status === ‘error‘">
p class="error" x-text="data.message">p>
template>
template x-if="data.status === ‘success‘">
img :src="data.message" alt="cute pup" />
template>
div>
template>
div>
script>
function dogFetcher() {
return {
breed: ‘corgi‘,
fetchStatus: ‘loading‘,
data: null,
init() {
this.$watch(‘breed‘, () => {
this.fetchDogs();
});
this.fetchDogs();
},
fetchDogs() {
this.fetchStatus = ‘loading‘,
fetch(`https://dog.ceo/api/breed/${this.breed}/images/random`)
.then(res => {
if (!res.ok) {
this.fetchStatus = ‘error‘
}
return res.json()
})
.then(data => {
this.fetchStatus = ‘idle‘
this.data = data
})
.catch(error => {
this.fetchStatus = ‘error‘
console.log({ error })
})
}
}
}
script>
文章标题：[Mise] Refetch API data when a state value changes with the `$watch` property in Alpine JS
文章链接：http://soscw.com/index.php/essay/60405.html