Javascript 如何在vueJs中呈现复杂的Json_Javascript_Jquery_Vue.js

Javascript 如何在vueJs中呈现复杂的Json

javascript jquery vue.js

Javascript 如何在vueJs中呈现复杂的Json,javascript,jquery,vue.js,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=

我正试图从一个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>

更新_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;
  }

函数生成视图（wf_规则）
{
//控制台日志（wf_规则）；
var html_str=''，response=false；
$.each（wf_规则、函数（键、值）{
如果（值.长度>0）
{
$.each（值，函数）（键1，值1）{
var ui_l1='”+value1.name+”；
html_str=html_str+ui_l1；
如果（值1.子项长度>0）
{
$.each（值1.子项，函数（键2，值2）{
$。每个（值2，函数（键3，值3）{
var ui_l2='
”+value3.name+”；
html_str=html_str+ui_l2；
如果（值3.子项长度>0）
{
$。每个（值3.子项，函数（键4，值4）{
如果（值4.长度>0）
{
var ui_l3='
”+value4[0]。name+”；
html_str=html_str+ui_l3；
}
})
}
html_str=html_str+''；
});
})
}
html_str=html_str+''；
});
$（'.contract_main'）.html（html_str）；
响应=真；
}
其他的
响应=错误；
});
返回响应；
}

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

首先为显示每个项目数据创建一个组件

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']
})

Vue.component（'recursive-template'{
名称：“递归模板”，
模板：“{index+1}}.{{item.name}”，
道具：['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
  }
})


var app=新的Vue({
el:“#应用程序”，
数据：{
数据数组：jsonDataX
}
})

查看此工作情况

请不要生气，但请更正“我正试图从Json数据中输出此内容”以使其可以理解您试图执行的操作。您可以尝试在HTML中使用，删除带有vue数据的硬编码值。@MU您可以阅读我的更新吗？1我已经在Jquery中完成了完整的渲染，但是我不能在

VUE

@Saurabh-umm中为

子元素

做同样的事情，我该怎么做，我能够呈现第一个家长的逻辑。

<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
  }
})