如何使用 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>

我遇到了一个情况，Ill必须用HTML模态弹出窗口绑定子<li>的数据元素，这样如果Modal中的值被更新，它也应该在Object/Dom中发生变化。

我被推荐使用 VueJs。

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

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

Answer 1

目前，我在您的代码中没有看到任何 Vue.Js 结构，您正在操作 JSON 数据并在 JS 代码本身中构造 HTML。你可以用 vue 的方式做到这一点，在那里你将创建一个 Vue 实例，在 Vue 方法中加载数据，并使用 Vue 语法来迭代数据和其他东西。您可以在此小提琴或下面的代码中看到一个简单的示例：

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 获取数据并显示它。