如何在使用 Vue 时刷新 Ajax 调用后的数据变量.js而无需诉诸 v-if 指令?

Question

目前，我确实v-if="Object.keys(video).length > 0"div，以确保video仅在实际可用时才发送到video-player组件。

如果我省略v-if检查，初始化为null的video将发送到video-player组件，并且视频不会加载，即使一秒钟后，video数据也会填充来自 Ajax 调用的 URL。有没有更好的方法来解决这个问题，而无需到处v-if指令？

Answer 1

您可以使用异步组件，它允许您处理异步代码并仅在准备就绪时解析组件，还提供了用于加载和处理错误的高级功能，下面是一个简单的示例：

Vue.component('async-component',
function (resolve, reject) {
fetch('https://randomuser.me/api/?results=10')
.then((resp) => resp.json())
.then(function(data) {
this.authors = data.results || [];    
resolve({
template:
`
<div>
<img 
v-for="author in authors"
:src='author.picture.medium' 
/>
</div>
`,
data() {
authors: []
}
});
});
}); 

var vm = new Vue({
el: '#app',
template: 
`
<async-component />
`
});

您还可以检查工作示例。