vue数据结构转换

Question

现在项目的需求是做逻辑树对应相应的语句，逻辑树的结构已经做好，如下：

var treeObj = [{
            value: '1',
            child:[
                { 
                    value: '1.1',
                    child:[]
                },
                {
                    value: '1.2',
                    child:[]
                }
            ]
        }]

现在需要把它渲染成类似
1 1.1
1 1.2
这样的结构
我的思路是将上面结构另外转化 请问这样是不是最好的？如果是，请问怎么转化，并且转化成什么样的数据结构会好点？

Answer 1

保证数据是json数组，vue循环嵌套

  <ul>
    <li v-for='val in treeObj'>
       <p  v-for='item in val.child' >
         {{val.value}}-{{item.value}}
       </p>
    </li>
  </ul>

    data() {
      return {
        treeObj: [{
          value: '1',
          child:[
            {
              value: '1.1',
              child:[]
            },
            {
              value: '1.2',
              child:[]
            }
          ]
        }]
      }
    },

Answer 2

对于这种结构，我意见是通过v-html渲染，渲染内容 通过js来写，就是写一个递归函数
function checkChild(input){

for (var i=0; i<input.length; i++){
    if (input[i].hasOwnProperty('child')){
        checkChild(input[i]['child'])
    }
}

}
对于你这种需求我觉得即便可能层级很深但是最好也不要超过3层，
太深的情况我觉得能让后台帮你转格式甚至后台渲染都比前端做代价要小