vue-for中使用显示后台数据，v-if的属性绑定标签一直绑定不上的原因？

Servlet从MySQL中获得数据

private void showComment(HttpServletRequest request, HttpServletResponse response) throws Exception {
        session = request.getSession();
        //获取session中的博客id
        int queryBlogId = Integer.parseInt(session.getAttribute("queryBlogId").toString());
        Vector<Vector<Object>> commentInfo=commentService.getCommentInfo(queryBlogId);
       	//使用jackson将数据转换成hson格式
       	ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(), commentInfo);
 }

在js中通过$.post()向后台请求并接受数据，并new出vue实例

 $.post("showComment.comment", function (commentInfo) {
        //将数据绑定到vue
        console.log(commentInfo)
        let commentInfoVue = new Vue({
            el: '#comment-show',
            data: {
                //循环遍历形成li标签内容
                commentDetailInfo: commentInfo,
                isNull: false,
            },
            created() {
            //如果后台请求的数据为空，设置isNull 为false
                if (commentInfo === null || commentInfo.length === 0) {
                    this.isNull = true;
                }
            }
        });
    }, "json");

通过vue将数据绑定到前台页面

<div id="comment-show">
        <h3>网友评论</h3>
        <div class="comment-info" v-for="comment in commentDetailInfo">
                <span>{{ comment[2] }}</span>
                <span>{{ comment[1] }}</span>
                <p>{{ comment[0] }} {{ isNull }}</p>
                <p v-if="isNull">暂无</p>
        </div>
 </div>

原因就出在这里，因为commentDetailInfo数据为空的话，这个div就不会显示，自然<p v-if="isNull">暂无</p>就不会显示，所以“暂无"信息一致会显示不出来

正确修改方式

<div id="comment-show">
            <h3>网友评论</h3>
            <div class="comment-info" v-for="comment in commentDetailInfo">
                <span>{{ comment[2] }}</span>
                <span>{{ comment[1] }}</span>
                <p>{{ comment[0] }} {{ isNull }}</p>
            </div>
            <p v-if="isNull">暂无</p>
        </div>

将<p v-if="isNull">暂无</p>放在外层div就ok了