如何在vueJs中渲染复杂的Json

时间：2017-02-13 12:41:34

标签： javascript jquery vue.js

我正试图从Json数据中获取此输出

<ol class="dd-list simple_with_drop vertical contract_main">
  <li class="alert mar" data-id="1" data-name="Active" style="">
    <div class="dd-handle state-main">Active<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span></div>
    <ol>
      <li class="alert mar" data-id="2" data-name="Cancelled" style="">
        <div class="dd-handle state-main">Pending<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span></div>
        <ol>
          <li class="dd-item alert mar action" data-name="email" style="">
            <div class="dd-handle">email<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span>&nbsp; <span class="edit cust-close" data-toggle="modal" data-target="#editAction"><i class="fa fa-pencil"></i></span></div>
          </li>
          <li class="dd-item alert mar action" data-name="email" style="">
            <div class="dd-handle">sms<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span>&nbsp; <span class="edit cust-close" data-toggle="modal" data-target="#editAction"><i class="fa fa-pencil"></i></span></div>
          </li>
        </ol>
      </li>
      <li class="alert mar" data-id="3" data-name="Inactive" style="">
        <div class="dd-handle state-main">Inactive<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span></div>
        <ol>
          <li class="dd-item alert mar action" data-name="email" style="">
            <div class="dd-handle">email<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span>&nbsp; <span class="edit cust-close" data-toggle="modal" data-target="#editAction"><i class="fa fa-pencil"></i></span></div>
          </li>
          <li class="dd-item alert mar action" data-name="email" style="">
            <div class="dd-handle">sms<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span>&nbsp; <span class="edit cust-close" data-toggle="modal" data-target="#editAction"><i class="fa fa-pencil"></i></span></div>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li class="alert mar" data-id="1" data-name="Active" style="">
    <div class="dd-handle state-main">Active<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span></div>
    <ol>
      <li class="alert mar" data-id="2" data-name="Cancelled" style="">
        <div class="dd-handle state-main">Pending<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span></div>
        <ol>
          <li class="dd-item alert mar action" data-name="email" style="">
            <div class="dd-handle">email<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span>&nbsp; <span class="edit cust-close" data-toggle="modal" data-target="#editAction"><i class="fa fa-pencil"></i></span></div>
          </li>
          <li class="dd-item alert mar action" data-name="email" style="">
            <div class="dd-handle">sms<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span>&nbsp; <span class="edit cust-close" data-toggle="modal" data-target="#editAction"><i class="fa fa-pencil"></i></span></div>
          </li>
        </ol>
      </li>
      <li class="alert mar" data-id="3" data-name="Inactive" style="">
        <div class="dd-handle state-main">Inactive<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span></div>
        <ol>
          <li class="dd-item alert mar action" data-name="email" style="">
            <div class="dd-handle">email<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span>&nbsp; <span class="edit cust-close" data-toggle="modal" data-target="#editAction"><i class="fa fa-pencil"></i></span></div>
          </li>
          <li class="dd-item alert mar action" data-name="email" style="">
            <div class="dd-handle">sms<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span>&nbsp; <span class="edit cust-close" data-toggle="modal" data-target="#editAction"><i class="fa fa-pencil"></i></span></div>
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

VueJs 

var jsonDataX = [{
  name: "Active",
  children: [{
    name: "Pending",
    id: 2,
    children: [{
      name: "sms"
    }, {
      name: "pushNotify"
    }]
  }, {
    name: "Inactive",
    id: 3,
    children: [{
      name: "sms"
    }, {
      name: "pushNotify"
    }]
  }]
}, {
  name: "Active",
  children: [{
    name: "Pending",
    id: 2,
    children: [{
      name: "sms"
    }, {
      name: "pushNotify"
    }]
  }, {
    name: "Inactive",
    id: 3,
    children: [{
      name: "sms"
    }, {
      name: "pushNotify"
    }]
  }]
}];

var app = new Vue({
  el: '#root',
  data: {
    jsonData: [],
    newName: '',
    isdiabled: false
  },
  mounted() {
    this.loadWorkFlowRules();
  },
  methods: {
    loadWorkFlowRules() {
        setTimeout(() => {
          this.jsonData = jsonDataX;
          console.log(this.jsonData);
         //Here I have to render it 

        }, 300)
      }
  }
})

JSFIDDLE

Update_1

在普通的Jquery中，我编写了像这样的代码

 function makeView(wf_rules)
  {
    //console.log(wf_rules);
    var html_str = '', response=false;
    $.each(wf_rules,function(key, value){
      if(value.length>0)
      {
        $.each(value,function(key1,value1){
            var ui_l1 = '<li class="alert mar" data-id="'+value1.id+'" data-name="'+value1.name+'" style=""><div class="dd-handle state-main">'+value1.name+'<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span></div><ol>';
            html_str = html_str+ui_l1;
              if(value1.children.length>0)
              {
                $.each(value1.children,function(key2,value2){
                    $.each(value2,function(key3,value3){
                        var ui_l2 = '<li class="alert mar" data-id="'+value3.id+'" data-name="'+value3.name+'" style=""><div class="dd-handle state-main">'+value3.name+'<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span></div><ol>';
                        html_str = html_str+ui_l2;
                        if(value3.children.length>0)
                        {
                          $.each(value3.children,function(key4,value4){

                              if(value4.length>0)
                              {
                                var ui_l3 ='<li class="dd-item alert mar action" data-id="'+value4[0].id+'" data-name="'+value4[0].name+'" data-api="'+value4[0].api+'" data-url="'+value4[0].url+'" data-json="'+value4[0].json+'" style=""><div class="dd-handle">'+value4[0].name+'<span class="cust-close" data-dismiss="alert" aria-label="Close"><i class="fa fa-times"></i></span>&nbsp; <span class="edit cust-close"  data-toggle="modal" data-target="#editAction" ><i class="fa fa-pencil"></i></span></div></li>';
                                html_str = html_str+ui_l3;
                              }
                          })
                        }
                        html_str = html_str+'</ol></li>';
                    });

                })
              }

            html_str = html_str+'</ol></li>';
        });
        $('.contract_main').html(html_str);
        response =true;
      }
      else
         response =false;
    });
    return response;
  }

有关如何使用Vue解决此问题的任何建议

1 个答案:

答案 0 :(得分：0)

使用recursive components

首先创建一个用于显示每个项目数据的组件

Vue.component('recursive-template', {
  name: 'recursive-template',
  template:'<div>{{index +1}}. {{item.name}} <recursive-template v-for="(innerItem, innerIndex) in item.children" :item="innerItem" :index="innerIndex" style="margin-left:30px"></recursive-template> </div>',
  props: ['item','index']
})

然后将它与你的json数据一起使用

<div id="app">
  <recursive-template v-for="(item, index) in dataArray" :index="index" :item="item"></recursive-template>
</div>

var app = new Vue({
  el: '#app',
  data: {
    dataArray: jsonDataX
  }
})

查看此工作fiddle

相关问题
最新问题