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.