In Vue project, we want to achieve the following layout effects
The rear end of the return data format, the data can be seen in FIG five item list in the same array
And my html structure is as follows:
I hope that direct rendering a large map on the left, then the right of the diagram is traversed by four small v-for, which requires the interception of the four array data. Four data after my first thought was intercepted product_list array v-for position through an array of direct slice method.
Operation is the following code:
At this time, I found that not only can not be rendered picture, opening the console, found that even img tags are not rendered. Why is this?
This is because the array slice method does not modify the original array, but taken on the basis of some elements of the original array rebuild a new array. This needs to know this copy out of the new array, and the data is not stored data. Vue view the data binding layer must appear in the required data or computed data, otherwise it is not possible to render the page.
The reason is found, then how to solve it, then think of modifications to data formats when receiving the data returned by the backend . Modifications and data structures modified as follows:
html code to render the page the way it can be replaced in the following manner, it achieved the desired page layout effects.
Further may also be used the way of calculating an attribute of data in the data format floorData modifications, be continued. . . . . . . .