Why can't the attribute binding label of v-if always be bound when the background data is displayed in vue-for?

Keywords: Vue Session Attribute MySQL

Why can't the attribute binding label of v-if always be bound when the background data is displayed in vue-for?

Servlet gets data from MySQL

private void showComment(HttpServletRequest request, HttpServletResponse response) throws Exception {
        session = request.getSession();
        //Get the blog id in session
        int queryBlogId = Integer.parseInt(session.getAttribute("queryBlogId").toString());
        Vector<Vector<Object>> commentInfo=commentService.getCommentInfo(queryBlogId);
       	//Converting data into hson format using jackson
       	ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(), commentInfo);
 }

Request and accept data from the background through $. post() in js, and new out the vue instance

 $.post("showComment.comment", function (commentInfo) {
        //Binding data to vue
        console.log(commentInfo)
        let commentInfoVue = new Vue({
            el: '#comment-show',
            data: {
                //Loop traversal to form li tag content
                commentDetailInfo: commentInfo,
                isNull: false,
            },
            created() {
            //If the data requested in the background is empty, set isNull to false
                if (commentInfo === null || commentInfo.length === 0) {
                    this.isNull = true;
                }
            }
        });
    }, "json");

Binding data to front page through vue

<div id="comment-show">
        <h3>Netizens commentary</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">No time</p>
        </div>
 </div>

The reason for this is that if the commentDetailInfo data is empty, the div will not be displayed. Natural < p-if= "isNull"> will not be displayed without </p>, so "no" information will not show up consistently.

Correct Modification
<div id="comment-show">
            <h3>Netizens commentary</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">No time</p>
        </div>

Put < p v-if= "isNull"> in the outer div ide for now.

Posted by daveoliveruk on Sat, 12 Oct 2019 07:42:47 -0700