在Vue項目中，我們想要實現下面的布局效果

　　

?

　　后端返回的數據格式如下，可以看出產品列表五張圖的數據位于同一個數組中

　　

?

?　　而我的html結構如下：

　　　　　　

?

　　我希望直接渲染左邊一張大圖，然后右邊的四張小圖通過v-for進行遍歷，這就需要截取后四條數組數據。我首先想到的就是通過數組的slice方法直接在v-for的位置截取product_list數組的后四條數據。

　　就是下面的代碼操作：

　　

?

　　這時，發現圖片不但無法渲染，點開控制臺，發現連img標簽都沒有渲染出來。這是為什么呢？

　　這是因為數組的slice方法并沒有修改原數組，而是在原數組的基礎上取出部分元素重新生成一個新數組。這就需要知道這個拷貝出來的新數組，并沒有存到data數據中。而Vue視圖層中綁定的數據必須要求出現在data或者computed數據中，否則就無法進行頁面渲染。

　　原因找到了，那又該如何解決呢，接下來就想到了在接收到后端返回數據的時候對數據格式進行修改。修改方式和修改后的數據結構如下：

　　　　　　　　

?

　　html代碼中渲染頁面的方式也就可以換成如下的方式，也就實現了想要的頁面布局效果。

　　

?

　　此外還可以采用計算屬性的方式，對data中的floorData數據格式進行修改，未完待續。。。。。。。。

?

轉載于:https://www.cnblogs.com/belongs-to-qinghua/p/11105645.html

總結

以上是生活随笔為你收集整理的Vue项目中v-for无法渲染数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。