Компонент VueJS не будет отображаться, пока я не нажму на него в Vue Devtools

ATLChris спросил: 13 октября 2017 в 07:38 в: vue.js

Я использую VueJS 2.5.3 в разделе (не SPA) бэкэнда блога, который выполняет вызов API для проверки избранного изображения, прикрепленного к сообщению.

Если он найдет его, он использует дочерний компонент, чтобы показать изображение. Проблема в том, что дочерний компонент не рендерится после успешного вызова API, поэтому объект изображения также не передается ему.

Как видно из этого GIF, дочерний компонент не рендерится. <!---->, у меня есть v-if, чтобы проверить, существует ли изображение. Однако если я щелкну на дочернем компоненте внутри Vue DevTools, дочерний компонент отобразит и отобразит изображение, как и ожидалось.

Мой вопрос: почему дочерний компонент будет отображаться только после нажатия на него в Vue Devtools? Вызывает ли Vue Devtools какое-либо событие, когда вы щелкаете по компоненту?

Вот дочерний компонент:

<template>
    <div v-if="showImage" class="featured-image-container" :class="[ size ]">
        <img :src="processedSrc" alt="Featured Image">
    </div>
</template><script>
export default {
    props: {
        image: {
            type: Object
        },
        size: {
            type: String,
            required: true
        }
    },
    data () {
        return {
            showImage: false
        }
    },
    computed: {
        processedSrc: function () {
            if (this.image && typeof this.image === 'object') {
                this.showImage = true
                return this.image.sizes[this.size].file
            } else {
                this.showImage = false
            }
        }
    }
}
</script>

А вот ссылка на код для родительского и дочернего компонентов:

0 ответов