Vue项目，v-for循环创建节点，根据每条对象的一个值来决定是否渲染（v-if）。无效

Question

问题描述

根据一个数组,v-for循环创建节点

<div v-for="blog in blogs" class="single-blog">
<div>{{blog.title}}</div>
<article v-if="blog.show">
    {{blog.content}}
</article>
</div>

其中blog.show的值，为true或者false
我想实现的效果就是，如果blog.show为false，则v-if把这个节点给去除（display:none）。
但是无效

自己尝试过哪些方法

v-if无效，我还试过改为用:style="{visibility:计算属性()}",但也无效要么全部显示、要么全部隐藏。
按理说显示和隐藏应该是根据每个show的值来决定的，但是打印的时候发现只要有一个show为false就直接影响
所有的节点

不知道怎么搞了，实在不行只能换种思路去实现了

Answer 1

代码没任何问题。 考虑下 blog.show的值 是否为字符串。 "true" /"false"
这样的话就肯定无效。
typeof blog.show 来debug下

Answer 2

乍一看感觉没啥问题，要不先把blogs数据贴出来看看，还有把每一项的key加上

Answer 3

你加key了吗大兄弟

Answer 4

https://cn.vuejs.org/v2/guide...

Answer 5

这里加不加key应该是不影响

Answer 6

表示日常加key, blog.show 应该是有问题的, vue控制台看看咯

Answer 7

代码片段1：

        <div v-for="blog in blogs" class="single-blog">
            <hr>
            <div>Title: {{blog.title}}</div>
            <article v-if="blog.show">
                Content:{{blog.content}}
            </article>
            <hr>
        </div>

代码片段2:

data() {
        return {
            blogs: [
                {title:'aaa', show: true, content:'aaaaa'},
                {title:'bbb', show: false, content:'bbbbb'},
                {title:'ccc', show: true, content:'ccccc'},
            ]
        };
    },

效果：

完全无法复现你说的问题。
还是老老实实把你的 blogs 打 console.log 出来吧。