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>

In 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

Альтернативное решение: Похоже, что единственная разница между v-if и v-else - это b-img * src, поэтому альтернативой может быть перемещение логики в JavaScript, отображениеWork.sub в массив URL-адресов изображений, которые по умолчанию равны default_avatar, только если URL не разрешается.

Таким образом, ваш шаблон будет выглядеть так:

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

Вы добавили бысвойство data для хранения URL-адресов изображений:

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

И наблюдатель на Work.sub, который устанавливает this.images:

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

Answer 2

Прежде всего, ваша функция 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;
   })
},

Если у вас все сборки настроены для работы с async function, метод будет ожидать ответа и оценивать Boolean, которого ожидает v-if.