[英]Vue.js async component not updating template
我有一個 Vue 組件,我在其中執行了一堆異步調用,然后應該填充我的模板。 但是,似乎沒有任何更新,即使我可以在控制台中看到我的數據正在返回。 我對 Vue 很陌生,所以我一定遺漏了一些東西。 這是我的代碼的簡化版本:
<template>
<div id="my_component">
<div v-bind:class="{ hidden: !isLoading }">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;background:#fff;display:block;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="50" cy="50" fill="none" stroke="#1ba4de" stroke-width="4" r="15" stroke-dasharray="70.68583470577033 25.561944901923447">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="0.9803921568627451s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
</circle>
</svg>
</div>
<div v-bind:class="{ hidden: isLoading }">
<h1>{{ result.title }}</h1>
</div>
</div>
</template>
<script>
export default {
name: 'MyComponent',
data () {
return {
isLoading: true,
result: null
}
},
async created () {
this.result = await myLongRunningAsyncFunction();
this.isLoading = true;
console.log(this.result) // Logs result of myLongRunningAsyncFunction()
}
methods: {
myLongRunningAsyncFunction: async function() {
// Make a bunch of API calls and get some data
}
}
}
</script>
您可以使用v-if
來隱藏/顯示元素,而不是切換 class。 我不確定您的hide
class 是什么樣的,但我猜它類似於display: none
女巫的效率較低。
<div v-if="!isLoading">
<h1>{{ result.title }}</h1>
</div>
您還需要將isLoading
設置為false
async created () {
this.result = await myLongRunningAsyncFunction();
this.isLoading = false;
console.log(this.result) // Logs result of myLongRunningAsyncFunction()
}
同樣在您的第一個 div 中,這看起來會更好:
<div v-bind:class="{ hidden: !isLoading }">
對此:
<div v-if="isLoading">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.