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

Question

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

template：

<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>

在script中：

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，它是data section中定义的铅，并且没有问题。

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

例如：

运行代码时，结果将是这样：

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

如何解决这个问题？

Answer 1

首先，您的函数Image()不返回Boolean，而返回Promise（来自axios）， 因此v-if的评估结果为 true ;

要使v-if与API调用（Axios GET）一起使用，最简单的方法是将图像方法转换为异步方法

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;
   })
},

如果您已配置所有构建版本以使用async function，则该方法将等待响应并评估Boolean所期望的v-if。

Answer 2

替代解决方案：：看来v-if和v-else之间的唯一区别是b-img的{​​{1}}，因此可以选择是将逻辑转移到JavaScript中，将src映射到图像URL的数组，仅在URL无法解析的情况下默认为Work.sub。

因此您的模板应为：

default_avatar

您将添加一个数据属性来保存图像URL：

<template>
  <div v-for="(img, index) in images" :key="index">
    <b-img :src="img" />
  </div>
</template

还有data() { return { images: [] } } 上的观察者，该观察者设置了Work.sub：

this.images

demo