如何使用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呈现列表元素

回答

相关问题