Recently, I came across an interesting requirement. The front-end uses Vue, but it needs to control the step size when traversing the collection with for, and process two elements at a time.
The following points need to be considered for this requirement:
1. Vue v-foris 标签指令not a separate tag like forEach in jsp, which means that its use requires a carrier.
2. The front-end and back-end are separated, both are api interfaces. When there is no single project, the request and session directly set the value, and the front-end page uses the ${}value-taking condition.
3. Vue does not have the four major scopes like jsp, and even if there is a separation between the front and back ends, the data cannot be directly stuffed <% %>into it.
The final code is as follows
<el-row v-for="item,index in tableData">
<ul v-if="index % 2 == 0">
<li v-if="tableData[index] != null">
{
{
tableData[index].goodsName}}
</li>
<li v-if="tableData[index+1] != null">
{
{
tableData[index+1].goodsName}}
</li>
</ul>
</el-row>
The overall idea is to use grid el-row as the outermost for carrier, and internally use ul as the display carrier of inline elements. You can use other tags as needed, but in any case, the outermost layer will inevitably generate multiple useless The for carrier tag. But there seems to be no solution to this, it is a defect of vue, if you have a solution, you can comment on it.
