v-for循环嵌套的问题

Question

1,需要从后端接受传递过来的数据，数据类型是类似这样的

           companyList:[
              {'name':'Google','industry':'互联网','tags':'五险一金','img':'https://s2.ax1x.com/2019/04/05/AWFTfS.jpg',},
              {'name':'Google','industry':'互联网','tags':'五险一金','img':'https://s2.ax1x.com/2019/04/05/AWFTfS.jpg',},
              {'name':'Google','industry':'互联网','tags':'五险一金','img':'https://s2.ax1x.com/2019/04/05/AWFTfS.jpg',},

            ],
            positionList:[
              {'name':'产品经理','issueTime':'19：30','salary':'20～30万','privince':'北京','education':'大专','experience':'3年'},
              {'name':'产品经理','issueTime':'19：30','salary':'20～30万','privince':'北京','education':'大专','experience':'3年'},
              {'name':'产品经理','issueTime':'19：30','salary':'20～30万','privince':'北京','education':'大专','experience':'3年'},
            ],

在html里面自己尝试很多中方法，比如在这两个数据放到一个对象里面，但是产生的结果就是如果数据一多的话全部就会横向排列，自己写的html代码如下

  <!--代码-->
      <div>
          <div v-for="(item1,x) in positionList" :key="x">
            {{item1.name}}
          </div>
        <div v-for="(item2,y) in companyList" :key="y">
          {{item2.name}}
        </div>
      </div>

实现的效果就是这样

如果采用在最外层包裹一个对象，html的内容变成循环嵌套的结构，渲染出来就变成这样

最终想要实现这样的结果

问题
1，现在对于这个渲染的层级问题有点搞不明白。不知道该怎样去进行渲染达到想要的结果
2.在处理数据的时候，后端返回的是一个对象包含两个数组，我现在的做法是把其中的两个数组单独给提取出来了，想问下这种类似的结构前端这边需不需要再进行数据的单独处理？

Answer 1

以你最终设计稿来看，数据结构应该是这样的才合理

{
'name':'产品经理',
'issueTime':'19：30',
'salary':'20～30万',
'privince':'北京',
'education':'大专',
'experience':'3年',
'company': {'name':'Google','industry':'互联网','tags':'五险一金','img':'https://s2.ax1x.com/2019/04/05/AWFTfS.jpg',}
}

company是职位的属性之一。

你要做的应该是在将后端返回的值赋给Vue的data之前拼凑出上面的数据结构

Answer 2

如果companyList和positionList有关联关系的话，是需要做下合并处理。如果两者没有关系，就是在布局和样式上调整了。