Wie kompliziert Json in vueJs zu machen

-1

Ich versuche, dies aus einer JSON-DatenWie kompliziert Json in vueJs zu machen

<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

löschte zu bekommen

Im normalen JQuery hatte ich den Code wie folgt

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

Irgendwelche Vorschläge

geschrieben, wie ich dies mit Vue

Quelle

2017-02-13 Vikram

beleidigt nicht, aber bitte korrigieren „Ich versuche, dies von einem Json Daten löschte zu bekommen“ zu machen, ist es verständlich, was Sie versuchen –

zu tun können Sie versuchen, mithilfe von [v -for] (https://vuejs.org/v2/guide/list.html#v-for) in HTML, entferne deinen fest codierten Wert mit vue-Daten. – Saurabh

@MU kannst du bitte mein Update_1 lesen Ich habe das komplette Rendering in Jquery gemacht, aber ich kann das nicht in 'VUE' machen – Vikram

Verwenden recursive components

Erstellen Sie zunächst eine Komponente für die Anzeige jeweils Positionsdaten

lösen können

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

Und dann verwenden Sie es einfach mit Ihren JSON-Daten

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

Sehen Sie diese Arbeit fiddle

Quelle

2017-02-13 15:09:35 AldoRomo88

Wie kompliziert Json in vueJs zu machen

Antwort

Verwandte Themen