[英]VueJS component wont render until I click on it in Vue Devtools
I am using VueJS 2.5.3 on a section (not SPA) of a blog backend that makes an API call to check for a featured image attached to the post. 我在博客后端的一个部分(而不是SPA)上使用VueJS 2.5.3进行API调用以检查附加到帖子的特色图像。
If it finds one, it uses a child component to show the image. 如果找到一个,它使用子组件来显示图像。 The problem is that the child component isn't rendering after the API call is successful and so neither is the image object passed to it.
问题是在API调用成功后子组件没有呈现,因此图像对象也没有传递给它。
As you can see in this GIF , the child component isn't rendering <!---->
, I have a v-if
on it to check if the image exists. 正如你在这个GIF中看到的那样 ,子组件没有渲染
<!---->
,我有一个v-if
来检查图像是否存在。 However, if I click on the child component inside of Vue DevTools, the child component renders and shows the image as expected. 但是,如果我单击Vue DevTools中的子组件,子组件将呈现并按预期显示图像。
My question is why would a child component only render after clicking on it in Vue Devtools? 我的问题是为什么子组件只有在Vue Devtools中单击它后才会呈现? Does Vue Devtools trigger some sort of an event when you click on a component?
当您单击某个组件时,Vue Devtools会触发某种事件吗?
Here is the child component: 这是子组件:
<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: 这里是父代组件和子组件代码的链接:
The issue is in your PostFeaturedImage.vue
component. 问题出在
PostFeaturedImage.vue
组件中。 You are depending on a computed value processedSrc
to set a data property showImage
. 您依赖于计算值
processedSrc
来设置数据属性showImage
。
However, showImage
is initially false
and you are using it in the v-if
directive on the root element. 但是,
showImage
最初为false
,您在根元素的v-if
指令中使用它。 This means that Vue will not render that element or the <img>
element inside of it. 这意味着Vue不会在其中呈现该元素或
<img>
元素。
Computed properties in Vue are lazy-loaded, meaning their functions are not called until they are referenced. Vue中的计算属性是延迟加载的,这意味着在引用它们之前不会调用它们的函数。 Since the
processedSrc
computed property is only being referenced on the <img>
element (and since that element is not being rendered) its method is not getting called, meaning the showImage
property is never set to true
. 由于
processedSrc
computed属性仅在<img>
元素上引用(并且由于该元素未被呈现),因此不会调用其方法,这意味着showImage
属性永远不会设置为true
。
However, when you inspect a component in Vue DevTools, it lists all of the computed properties, meaning that the method for the processedSrc
computed is getting called, and the showImage
property is being set in that case. 但是,当您在Vue DevTools中检查组件时,它会列出所有计算属性,这意味着将调用已
processedSrc
的方法,并且在这种情况下正在设置showImage
属性。
The easiest solution to your issue would be to use v-show
instead of v-if
, since elements inside a v-show
will be hidden but still rendered even if the value is false
. 对您的问题最简单的解决方案是使用
v-show
而不是v-if
,因为v-show
元素将被隐藏,但即使值为false
也仍然呈现。
However, I would almost never recommend setting a data property's value based on logic within a function for a computed property. 但是,我几乎从不建议根据计算属性的函数内的逻辑设置数据属性的值。 It creates unintended, hard-to-debug side-effects which lead to issues like the one you're currently experiencing.
它会产生意想不到的,难以调试的副作用,从而导致像您目前遇到的问题。
I would suggest making your showImage
property a computed property as well, based on the logic currently determining its value in the processedSrc
computed method. 我建议你的
showImage
属性也是一个计算属性,基于当前在processedSrc
计算方法中确定其值的逻辑。 Then, you can determine whether or not to try to calculate the value of the processedSrc
computed based on the value of showImage
. 然后,您可以确定是否尝试计算基于
showImage
的值计算的processedSrc
的值。
computed: {
showImage: function() {
return this.image && typeof this.image === 'object';
},
processedSrc: function () {
if (this.showImage) {
return this.image.sizes[this.size].file;
}
}
}
This way, it is much easier to see what is affecting what and your code will be easier to maintain. 通过这种方式,可以更轻松地查看影响内容的内容,并且您的代码更易于维护。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.