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

对于qazxsw poi来说，它已经在qazxsw poi中定义并且没有任何问题。

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

例如：

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

data section

但我希望第一个图像填充默认图像，不显示不存在图标！

如何解决这个问题呢？

Answer 1

替代解决方案：看起来Image和之间唯一的区别是v-if的v-else，所以另一种方法是将逻辑移动到JavaScript中，将b-img映射到图像URL数组，只有在URL无法解析时才会默认为src 。

所以你的模板将是：

Work.sub

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

default_avatar

和

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

的观察者，设置

data() {
  return {
    images: []
  }
}

：

Work.sub

this.images

Answer 2

首先，你的函数

watch: {
  'Work.sub': {
    immediate: true,
    async handler(sub) {
      // For each image URL, attempt to fetch the image, and if it returns
      // data (image exists), collect the URL. Otherwise, default.
      this.images = await Promise.all(Object.keys(sub).map(async (key) => {
        const img = sub[key];
        if (!img) return this.default_avatar;

        const url = `//placekitten.com/${img}`;
        const { data } = await axios.get(url);
        return data ? url : this.default_avatar;
      }));
    }
  }
}

没有返回demo它返回一个Image()（来自axios），所以Boolean评估为真;

要让Promise使用API​​调用（Axios GET），最简单的方法是在异步方法中转换Image方法

v-if

如果您已将所有构建配置为使用v-if，则该方法将等待响应并评估

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。