Question

我有一个javascript代码，它使用服务器中的json呈现<ol><li></li></ol>。代码看起来像这样

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>

我遇到了一种情况，即Ill必须使用HTML MODAL弹出框绑定子<li>的数据元素。因此，如果Modal中的值更新，它也会在Object / Dom中更改。

我被建议使用VueJs。

我经历过！ VueJs的基础知识，但这并没有涵盖我如何从Json中绑定完整列表，

任何有关我如何做到这一点的帮助都很棒

Answer 1

目前，我在代码中看不到Vue.Js的任何结构，您正在操纵JSON数据并在JS代码本身中构建HTML。您可以通过vue方式执行此操作，您将在其中创建Vue instance，在Vue data中加载methods并使用Vue语法iterate over data和other things 。您可以在此fiddle或以下代码中看到一个简单示例：

＆＃13;

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

＆＃13;

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="data in jsonData">{{data}}</li>
  </ul>
</div>

＆＃13;

您可以查看vue-hackernews以了解有关代码结构的更多信息，如何以JSON格式从远程API获取数据并显示它。

如何使用来自json数据的VueJs呈现List元素

1 个答案: