vue2 中 v-for 不能嵌套使用 v-if 吗?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2433 天前的主题，其中的信息可能已经有所发展或是发生改变。

v-for 中嵌套使用 v-if 报错
是我哪里写错了吗?

<body>
    <div id="test">
        <p v-for="d in hhh">
            {{  d  }}
            {{  d.type  }}
            {{  d.msg  }}
            <h1 v-if="   d.type == 'h1'   "> {{ d.msg }} </h1>
            <h2 v-if="   d.type == 'h2'   "> {{ d.msg }} </h2>
            <h3 v-if="   d.type == 'h3'   "> {{ d.msg }} </h3>
        </p>
    </div>
</body>
<script src="../vue.js"></script>
<script >
   let vm= new Vue({
        el:"#test",
        data:{
            hhh:[
                {
                    'type':'h1',
                    'msg':'h1h1h1'
                },
                {
                    'type':'h2',
                    'msg':'h2h2h2'
                },
                {
                    'type':'h3',
                    'msg':'h3h3h3'
                },
            ]
        },
    });
</script>

下面是浏览器的报错信息:

[Vue warn]: Property or method "d" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

[Vue warn]: Error in render function: "TypeError: Cannot read property 'type' of undefined"

4 条回复 • 2017-08-29 14:28:20 +08:00