javascript - 如何使用 VueJs 从 json 数据呈现列表元素

Question

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

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>

我遇到了一种情况，我必须绑定(bind) child 的数据元素 <li>使用 HTML MODAL 弹出窗口，因此如果 Modal 中的值更新，它也应该在 Object/Dom 中更改。

我被推荐使用 VueJs。

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

对我如何做到这一点的任何帮助都会很棒

Answer 1

目前我在您的代码中没有看到任何 Vue.Js 结构，您正在操纵 JSON 数据并在 JS 代码本身中构建 HTML。你可以用 vue 的方式来做，你将在其中创建一个 Vue instance , 加载 data在 Vue 中 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>

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