json 데이터의 VueJs를 사용하여 List 요소를 렌더링하는 방법

Question

서버에서 json을 사용하여 <ol><li></li></ol>을 렌더링하는 자바 스크립트 코드가 있습니다. 코드는 내가 아픈,하는 HTML 모달 팝업으로 아이 <li>의 데이터 요소를 바인딩해야 할 상황에있어이

function loadWorkFlowRules() { 
    var wf_id = <?php echo $wf->id; ?>; 

    $.post("/api/wfengine/get_wf_rules/", { 
    wf_id: wf_id 
    }, function(result) { 
    var wf_rules = JSON.parse(result).data; 
    if (makeView(wf_rules)) { 
     toastr.success('The Rules are Successfully Loaded!'); 
    } else 
     toastr.info('Welcome to Work Flow Editor'); 


    }); 

} 

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">' + 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_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; 
} 

HTML

<div class="dd"> 
    <ol class="dd-list simple_with_drop vertical contract_main"> 

    </ol> 
</div> 

같은 것을 보이는 경우에 따라서 Modal의 값이 Object/Dom에서도 변경됩니다.

VueJs를 사용하는 것이 좋습니다.

나는 지났습니다. 현재

Answer 1

내가 어떤 구조를 볼 수 없습니다하여 VueJs의 기본,하지만 그건 내가 JSON에서 목록을 결합 ccan 방법 적용되지 않았다가,

내가 할 수있는 방법에 어떤 도움이 좋을 것 Vue.Js 코드에서 JSON 데이터를 조작하고 JS 코드 자체에서 HTML을 생성합니다. 당신은 Vue instance을 생성하고, 의로드를 methods에 작성하고, Vue 구문을 iterate over data 및 other things으로 사용하는 방식으로 수행 할 수 있습니다. 간단한 예를 들어이 fiddle 또는 아래의 코드에서 볼 수 있습니다

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    jsonData: [] 
 
    }, 
 
    mounted() { 
 
    this.loadJsonData(); 
 
    }, 
 
    methods: { 
 
    loadJsonData(){ 
 
     setTimeout(()=>{ 
 
      this.jsonData = ["first", "Second", "Third", "And So On"] 
 
     }, 300) 
 
    } 
 
    } 
 
})

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <ul> 
 
    <li v-for="data in jsonData">{{data}}</li> 
 
    </ul> 
 
</div>

당신은 JSON 형식의 원격 API를에서 데이터를 가져 오는 방법 코드의 구조에 대한 자세한 내용을 이해하기 vue-hackernews 볼 수 있습니다 그것을 표시하십시오.