如何使用json數據中的VueJs呈現列表元素

我有一個JavaScript代碼，它呈現<ol><li></li></ol>，從服務器使用json。該代碼看起來是這樣的如何使用json數據中的VueJs呈現列表元素

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>

我進入的情況下生病有一個HTML模式彈出綁定的孩子<li>的數據元素，所以，如果Modal中的值在Object/Dom中更新。

我被推薦使用VueJs。

我已經過了！該VueJs的基礎，但是，這並不能掩蓋我怎麼CCAN從一個JSON綁定完整列表，

在我該怎麼辦任何幫助

來源

2017-02-13 Vikram

vuejs是一個完整的框架，你已經做了一些與jQuery的數據處理爲什麼你想要添加另一個庫在你的頁面做一些模式綁定？ – madalinivascu

@madalinivascu這實際上只是一個例子，這個應用程序將使用很多Json和UI方面的數據更新/刪除等，就像一個SPA，所以我們決定使用一個框架，如果你只是給我一些指導，我如何應該繼續前進，這將是綽綽有餘 – Vikram

目前我沒有看到任何結構，這將是巨大的Vue.Js在你的代碼中，你正在操縱JSON數據並在JS代碼本身中構造HTML。你可以這樣做，你將創建一個Vue instance，在Vue methods中加載data，並使用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>

你可以看一下vue-hackernews瞭解更多有關的代碼結構，如何來從JSON格式遠程API的數據並顯示它。

來源

2017-02-13 06:28:26 Saurabh

如何使用json數據中的VueJs呈現列表元素

回答

相關問題