我正在單擊一個按鈕來呼叫 API 以獲取隨機事實和長度。然后將其顯示在兩個有效的輸入欄位中。當再次單擊按鈕時，我正在努力解決如何將輸入欄位中的文本更改為 API 中的新事實和長度。我知道這很簡單，但似乎找不到解決方案。任何幫助，將不勝感激。
<template>
<form>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="300" height="300" />
<br>
<br>
<input type="text" id="idFact" v-model="facts">
<br>
<br>
<input type="text" id="idLength" v-model="lengths">
<br>
<br>
<button v-on:click="callAPI" type="button">Call</button>
</header>
</form>
</template>
<script>
export default {
data() {
return {
posts: '',
facts: '{fact}',
lengths: '{length}',
};
},
methods: {
async getData() {
try {
let response = await fetch("https://catfact.ninja/fact");
this.posts = await response.json();;
} catch (error) {
console.log(error);
}
},
callAPI() {
this.facts = this.posts.fact
this.lengths = this.posts.length
}
},
created() {
this.getData();
}
}
</script>
謝謝
uj5u.com熱心網友回復：
呼叫getDataclick 處理程式中的方法callAPI，并從鉤子中洗掉呼叫created以避免冗余呼叫：
<script>
export default {
data() {
return {
posts: '',
facts: '{fact}',
lengths: '{length}',
};
},
methods: {
async getData() {
try {
let response = await fetch("https://catfact.ninja/fact");
this.posts = await response.json();;
} catch (error) {
console.log(error);
}
},
callAPI() {
this.getData()
this.facts = this.posts.fact
this.lengths = this.posts.length
}
},
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/485770.html