Почему некоторые из моих изображений, помещенных в шаблон Vue, исчезают при фильтрации содержимого?

Question

Я был назначен ответственным за веб-сайт Drupal, который имеет некоторый контент, который размещается через сложный набор файлов Vue. Я никогда не использовал Vue, поэтому мне нужна помощь с критической проблемой, с которой мы сталкиваемся.

У меня есть раздел новостей на сайте, который пользователи могут отфильтровывать из выпадающего списка (выбирая тему из меню). Это отлично работает. Однако всякий раз, когда вы возвращаете ранее отфильтрованную новость, показанное изображение не загружается. Шаблон Vue возвращает изображение по умолчанию. Но это происходит только для некоторых изображений.

Как я уже говорил, файл Vue.js является сложным - он импортирует около десятка других файлов, которые контролируют другие функции сайта. Это код из наиболее применимого файла:

export default {
    props: {
        url: {
            type: String,
            required: true,
        },
        tag: {
            type: String,
            required: false,
        },
        eyebrow: {
            type: String,
            required: false,
        },
        title: {
            type: String,
            required: true,
        },
        image: {
            type: Object,
            required: false,
        },
    },
    computed: {
        imageUrl() {
            return this.image && this.image.url ? this.image.url : '/themes/my-theme/images/no-image.jpg';
        }
    },
    template: `
        <a :href="url" class="news-card">
            <span class="news-card__image">
                <img :src="imageUrl" :alt="image.alt">
            </span>
            <span class="news-card__text">
                <span class="news-card__tag" v-if="tag" v-html="tag">
                </span>
                <p class="news-card__eyebrow" v-if="eyebrow">
                    {{ eyebrow }}
                </p>
                <h2 class="news-card__title">
                    {{ title }}
                </h2>
            </span>
        </a>
    `
};

Я бы написал больше, но я не знаю, что еще нужно для диагностики проблемы Vue. Извините, я новичок в Vue, и это очень запутанно!

UPDATE Я добавил код view.js ниже:

import Vue from '@vue';
import { mapState } from 'vuex';
import ListingGrid from '/components/listing-grid';
import ListingNav from '/components/listing-nav';
import ProgramCard from '/components/program-card';
import ListingCard from '/components/listing-card';
import NewsCard from '/components/news-card';
import ListingFilters from '/components/listing-filters';
import ListingLoader from '/components/listing-loader';
import ListingStickyNav from '/components/listing-sticky-nav';
import TabSelect from '/components/tab-select';
import ajaxStore from './store/ajax';
import staticStore from './store/static';

export default (id) => {
    new Vue({
        el: `#${id}`,
        components: {
            ListingFilters,
            ListingGrid,
            ListingNav,
            ProgramCard,
            ListingCard,
            NewsCard,
            ListingLoader,
            ListingStickyNav,
            TabSelect,
        },
        data: {
            lazy: true
        },
        store: id === 'listing-static' ? staticStore : ajaxStore,
        computed: mapState({
            grid() {
                return this.$store.getters.filteredGrid;
            },
            filters: state => state.filters,
            tabs: state => state.tabs,
            loading: state => state.loading,
            showLoader: state => state.infiniteLoading,
            cardType: state => state.cardType
        }),
        image: {
            type: Object,
            default: function () {
                return {
                    url: '/themes/my-theme/images/no-image.jpg',
                    alt: 'Default No Image Alt Text'
                }
            },
        },
        template: `
            <main class="view__content v-listing vue-loaded" id="${id}">
                <listing-sticky-nav>
                    <template slot="tab-content">
                        <tab-select
                            :tabs="tabs"
                            v-if="tabs.items"
                        >
                        </tab-select>
                    </template>
                    <template slot="panel">
                        <listing-filters
                            :filters="filters"
                            additional-classes="mobile"
                        >
                        </listing-filters>
                    </template>
                </listing-sticky-nav>
                <listing-filters
                    :filters="filters"
                >
                </listing-filters>
                <listing-grid
                    :has-results="grid.length > 0"
                    :loading="loading"
                    :lazy="lazy">
                    <listing-nav
                        v-if="tabs"
                        :tabs="tabs"
                        slot="nav"
                    >
                    </listing-nav>
                    <template slot="grid">
                        <component
                            :is="cardType"
                            v-bind="item"
                            v-for="item, index in grid"
                            :key="index">
                        </component>
                    </template>
                    <template slot="empty">
                        No results found.
                    </template>
                </listing-grid>
                <span class="v-listing-footer" v-if="showLoader">
                    <listing-loader></listing-loader>
                    <span class="visually-hidden">loading</span>
                </span>
            </main>
        `
    });
}

Answer 1

Хотя я согласен с приведенными выше комментариями о том, что существует множество недостающих элементов, я являюсь огромным сторонником VueJS, и я хотел бы помочь, если это возможно.

Первый вопиющий вопрос, который я вижу, заключается в том, что свойство image не требуется.Вычисленное свойство imageUrl() является защитным в том смысле, что оно возвратит значение по умолчанию '/themes/my-theme/images/no-image.jpg', если свойство image опущено.

Однако в коде вашего шаблона в <img /> вы ссылаетесь на объектключ 'alt' от объекта image, который может присутствовать или не присутствовать.

Я настоятельно рекомендую добавить вычисляемое свойство:

imageAlt() {
    return this.image && this.image.alt ? this.image.alt : 'Default No Image Alt Text';
}

Затем в вашем шаблоне обновитеДобавьте тег image следующим образом:

<img :src="imageUrl" :alt="imageAlt">

Это укрепит ваш код и предотвратит ошибку.Возможно, вы захотите обновить альтернативный текст по умолчанию, так как он был предоставлен только в качестве примера.

Если это не помогло решить проблему, прокомментируйте следующую информацию для получения дополнительной помощи.

1. Есть ли какие-либо ошибки JS в консоли?
2. Загружали ли вы расширение Vue Devtools ?
3. Если да, каково значение вычисленных свойств для imageUrl при работе ипосле возникновения этой проблемы?

Обновление.В качестве альтернативного подхода (и я предпочитаю это) вы также можете удалить все вычисленные свойства и предоставить объект по умолчанию image.Для этого не требуется никаких наблюдателей, и выглядит это так:

image: {
    type: Object,
    default: function () {
        return {
            url: '/themes/my-theme/images/no-image.jpg',
            alt: 'Default No Image Alt Text'
        }
    },
}

Ваш тег изображения будет выглядеть следующим образом:

<img :src="image.url" :alt="image.alt">

Для получения дополнительной информации посетите: https://vuejs.org/v2/guide/components-props.html