英文:
vue3 using await at top level to get ref() data, but can't render html data in <template>
问题
<template>
<div>
<div v-if="loading">加载中...</div>
<div v-else>{{ data.value }}</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const data = ref(null);
const loading = ref(true);
async function fetchData() {
await new Promise((resolve) => setTimeout(resolve, 2000));
console.log("333");
data.value = '<p>HTML</p>';
loading.value = false;
}
await fetchData();
</script>
英文:
<template>
<div>
<div v-if="loading">Loading...</div>
<div v-else>{{ data.value }}</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const data = ref(null);
const loading = ref(true);
async function fetchData() {
await new Promise((resolve) => setTimeout(resolve, 2000));
console.log("333");
data.value = '<p>HTML</p>';
loading.value = false;
}
await fetchData();
</script>
Removing wait works, but I need to use wait to get the data asynchronously, what should I do?
答案1
得分: 0
你没有提到你正在使用和针对的工具版本，但这个帖子可能对你有帮助：
一个简单的 fetchData().then(() => {}) 可能就是你所需要的。
但如果这不起作用，你可能需要使用 "Suspense"。请查看来自Vue 3文档的更多信息：
https://vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script
英文:
You didn't mention the tool versions you're using and targeting, but this thread may help you:
A simple fetchData().then(() => {}) may be all you need.
But if that doesn't work, you will likely need to work with "Suspense". Check this page for more info straight from the Vue 3 docs:
https://vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script
答案2
得分: 0
不需要在调用它时等待fetchData()。错误是在模板中使用data.value，而应该使用data。
<template>
<div>
<div v-if="loading">加载中...</div>
<div v-else>{{ data }}</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const data = ref(null);
const loading = ref(true);
async function fetchData() {
await new Promise((resolve) => setTimeout(resolve, 2000));
console.log("333");
data.value = '<p>HTML</p>';
loading.value = false;
}
fetchData();
</script>
英文:
You don't need to await fetchData() when calling it. The mistake was using data.value in template, when you should be using data.
<template>
<div>
<div v-if="loading">Loading...</div>
<div v-else>{{ data }}</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const data = ref(null);
const loading = ref(true);
async function fetchData() {
await new Promise((resolve) => setTimeout(resolve, 2000));
console.log("333");
data.value = '<p>HTML</p>';
loading.value = false;
}
fetchData();
</script>
答案3
得分: 0
我认为最好的方法是这样的：
<script setup lang="ts">
import { ref } from 'vue';
const data = ref(null);
const loading = ref(true);
const fetchData = async () => {
await new Promise((resolve) => setTimeout(resolve, 5000));
console.log('333');
data.value = '<p>HTML</p>';
loading.value = false;
};
fetchData();
</script>
<template>
<div>
<div v-if="loading">Loading...</div>
<div v-else>{{ data }}</div>
</div>
</template>
在模板中，您需要使用 {{data}} 而不是 data.value。
英文:
I believe that the best approach is something like that:
<script setup lang="ts">
import { ref } from 'vue';
const data = ref(null);
const loading = ref(true);
const fetchData = async () => {
await new Promise((resolve) => setTimeout(resolve, 5000));
console.log('333');
data.value = '<p>HTML</p>';
loading.value = false;
};
fetchData();
</script>
<template>
<div>
<div v-if="loading">Loading...</div>
<div v-else>{{ data }}</div>
</div>
</template>
On the template you need to use {{data}} instead of data.value
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论