javascript - VueJS如何实现对多层对象的列表渲染

Answer 1

在v-for遍历对象的时候，会有一个$key变量。用你的数据写了一下，HTML部分应该是这样的：

<ul>
  <template v-for="_obj in myObj">
    <li>{{ $key }}</li>
    <ul>
      <template v-for="__obj in _obj">
        <li>{{ $key }}</li>
        <ul>
          <template v-for="value in __obj">
            <li>{{ $key }}</li>
            <ul>
              <li>{{ value }}</li>
            </ul>
          </template>
        </ul>
      </template>
    </ul>
  </template>
</ul>

这样写可以实现，但是不推荐。最好是把对象处理成合适的数组以后再遍历。

Answer 2

在线版本

点击查看运行

<p id="app">
  <recursive-object :data="data"></recursive-object>
</p>

//递归对象
var recursiveObject = Vue.extend({
  name: 'recursive-object',
  template:[
  '<ul>',
    '<li v-for="(key,val) in data">',
            '<p v-if="is_obj(val)">',
        '<span>{{ key }}</span>',
       '<recursive-object :data="val"></recursive-object>',
       '</p>',
       '<span v-if="!is_obj(val)">{{key}} - {{val}}</span>',
    '</li>',
  '</ul>'].join(''),
  props:{data:{}},
  methods:{
    is_obj:function(val){
      return Object.prototype.toString.call(val) === '[object Object]'
    }
  }
})
//注册个递归组件
Vue.component('recursiveObject',recursiveObject)

//go...
new Vue({
  el:'#app',
  data:function(){
    return {
      data:{
        text:'yes',
        a0:{
          test1:'vace1',
          test2:'vace2'
        },
        a1:{
          asub1:{
          asubsub1:'hello1',
          asubsub2:'hellow'
         },
        asub2:{
          asubsub1:'hello4',
          asubsub2:'hello5',
          asubsub3:{
            asubsubsub1:'world',
            asubsubsub2:'world'
          }
        }
      }
      }
    }
  }
})

Answer 3

建议数据最多二层，太多层逻辑乱，容易出错
可以在拿到data的时候，处理一下data，整理为最多两层的data，然后再给到vuejs