如何在 vueJs 中渲染复杂的 Json答案

【问题标题】：How to render complicated Json in vueJs如何在 vueJs 中渲染复杂的 Json
【发布时间】：2017-07-01 10:52:13
【问题描述】：

我正在尝试从 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 解决此问题的任何建议

【问题讨论】：

不要被冒犯，但请更正“我正在尝试从 Json 数据中获取此输出”，以使您可以理解您正在尝试做什么
您可以尝试在 HTML 中使用v-for，使用 vue 数据删除您的硬编码值。
@MU 你能读一下我的 Update_1 我已经在 Jquery 中完成了完整的渲染，但我无法在 VUE 中做同样的事情
@Saurabh umm for child 元素我该怎么办？，我能够呈现第一个父级的逻辑。

标签： javascript jquery vue.js

【解决方案1】：

使用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

【讨论】：