Vue.js，如何用异步函数的结果检查v-if指令

Question

我正在向用户展示一个链接到另一个网站的网络应用程序。根据用户点击的链接，它会将他们带到另一个页面或停留在同一页面上。

我目前的实现方法是；v-if"；指令，该指令检查异步函数的结果，但函数的值总是返回"；待决承诺"；而不是实际值。

我正在尝试做一些类似的事情

<router-link v-else-if="checkValue(origin.link)" target="_blank" :to= "origin/link" >
<span @click="checkValue(origin.link)">
{{ origin.value }} 
</span>
</router-link>

这里的问题是"；checkValue"；在v-if中是一个promise，因此它在v-if中将永远不会得到true或false值。

我无法将此调用的数据存储在数据变量中，因为有数百万条记录，而且我无法存储所有记录"checkValue"；是像一样的异步函数吗

async checkValue(link: string) {
const val = await axios.get('service/${link}')
if(val) {
return true
} else {
return false
}

在v-if指令中，有没有一种方法可以检查这个异步函数的返回？或者我还有其他方法可以解决这个问题吗？谢谢

Answer 1

如果我是你，我会使用带有变量的v-If(或v-show(指令。我还没有测试下面的片段，但像这样的东西应该可以工作：

try{
let response = await axios.get('service/${link}')
this.useThisVariableInVIF = true // or response.data.message;
}catch(error) {
this.useThisVariableInVIF = false;
console.log(error);
};
}

然后只有v-else-if="useThisVariableInVIF"

Answer 2

您不需要将此调用的数据存储在数据变量中，您可以这样修改代码。

<router-link v-else-if="hasValue" target="_blank" :to= "origin/link" >
<span @click="checkValue(origin.link)">
{{ origin.value }} 
</span>
</router-link>
<script>
export default {
data: function {
return {
hasValue: false
}
}
created: function() {
axios.get('service/${link}').then(c => {
this.hasValue = !!c
})

}
}
</script>