jsonデータからVueJsを使用してList要素をレンダリングする方法

Question

<ol><li></li></ol>をレンダリングするjavascriptコードがあります。サーバーのjsonを使用しています。コードは、私が病気で、HTML MODALポップアップで子供<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の方法で行うことができます。Vue instanceを作成し、dataをVue methodsにロードし、Vue構文をiterate over dataとother thingsにします。

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を見ることができます：あなたはこのfiddleで見ることができるか、コードの下に一つの簡単な例それを表示する。