javascript - v-if 当函数返回 true 或 false 时不起作用 [VueJs]

Question

我正在开发VueJs，并且在我的template部分..我定义了一个条件来检查图像URL是否存在。

模板:

<div v-for="(sub, key) in Work.sub" :key="sub.id" >
  <span v-if="Image('https://XXXX.blob.core.windows.net/XXXX/XXXXX-' + key +'.png')" > 
     <b-img :src="'https://XXXX.blob.core.windows.net/XXXX/XXXXX-' + key +'.png'" />
  </span>
  <span v-else>
     <b-img :src="default_avatar"/> 
  </span>
</div>

在脚本中:

Image: function(img_url)
{
   return axios({
      method: "GET",
      timeout: 3000,
      headers: {
        .......................
      },
      url: img_url
   })
   .then( function(response){
      this.ifImageExist = true;
      return this.ifImageExist;
   })
   .catch( function(error){
      this.ifImageExist = false;
      return this.ifImageExist;
   })
},

对于default_avatar，它已经在数据部分中定义，没有问题。

我的问题是当Image函数检查图像URL是否存在时。如果存在，则提供给定 URL 中的图像，但如果不存在，则图像将为空白!

例如:

当我运行代码时，结果将是这样的:

但我希望第一张图片用默认图片填充，而不是显示不存在的图标!

如何解决这个问题？

Answer 1

首先，您的函数 Image() 不会返回 Boolean 它返回一个 Promise (来自 axios)，因此 v-if 的计算结果为 true；

要让 v-if 使用 API 调用 (Axios GET)，最简单的方法是将 Image 方法转换为异步方法

Image: async function(img_url)
{
   return axios({
      method: "GET",
      timeout: 3000,
      headers: {
        .......................
      },
      url: img_url
   })
   .then( function(response){
      this.ifImageExist = true;
      return this.ifImageExist;
   })
   .catch( function(error){
      this.ifImageExist = false;
      return this.ifImageExist;
   })
},

如果您已将所有构建配置为可以使用异步函数，则该方法将等待响应并评估Boolean，其中v-if 正在等待。