Question

我在博客后端的一个部分（而不是SPA）上使用VueJS 2.5.3进行API调用以检查附加到帖子的精选图片。

如果找到，则使用子组件显示图像。问题是在API调用成功后子组件没有呈现，因此图像对象都没有传递给它。

As you can see in this 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>

And here is a link to the code for the parent and child components:

Answer 1

问题出在您的PostFeaturedImage.vue组件中。您依赖于计算值processedSrc来设置数据属性showImage。

但是，showImage最初是false，您在根元素的v-if指令中使用它。这意味着Vue不会在其中呈现该元素或<img>元素。

Vue中的计算属性是延迟加载的，这意味着在引用它们之前不会调用它们的函数。由于processedSrc计算属性仅在<img>元素上被引用（并且由于该元素未被呈现），因此不会调用其方法，这意味着showImage属性永远不会被设置为true。

但是，当您在Vue DevTools中检查组件时，它会列出所有计算属性，这意味着将调用processedSrc计算的方法，并且正在设置showImage属性那种情况。

对您的问题最简单的解决方案是使用v-show而不是v-if，因为v-show中的元素将被隐藏，但即使值为{{1}，仍会呈现}。

但是，我几乎从不建议根据计算属性的函数内的逻辑设置数据属性的值。它会产生意想不到的，难以调试的副作用，从而导致像您目前正在经历的那样的问题。

我建议根据当前在false计算方法中确定其值的逻辑，使您的showImage属性成为计算属性。然后，您可以确定是否尝试根据processedSrc的值计算processedSrc的值。

showImage

通过这种方式，可以更轻松地查看影响内容的内容，并且您的代码更易于维护。

VueJS组件不会渲染，直到我在Vue Devtools中单击它

1 个答案: