Javascript 如何从json数据中使用VueJs呈现列表元素

我有一个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;
}

函数加载工作流规则（）{
var wf_id=；
$.post（“/api/wfengine/get\u wf\u rules/”{
wf_id:wf_id
}，函数（结果）{
var wf_rules=JSON.parse（result）.data；
if（生成视图（wf_规则））{
toastr.success（'规则已成功加载！'）；
}否则
toastr.info（“欢迎使用工作流编辑器”）；
});
}
函数生成视图（wf_规则）{
//控制台日志（wf_规则）；
var html_str=''，
响应=错误；
$.each（wf_规则、函数（键、值）{
如果（value.length>0）{
$.each（值，函数）（键1，值1）{
var ui_l1='
”+value1.name+”；
html_str=html_str+ui_l1；
如果（值1.children.length>0）{
$.each（value1.children，function）（键2，value2）{
$。每个（值2，函数（键3，值3）{
var ui_l2='
”+value1.name+”；
html_str=html_str+ui_l2；
如果（值3.children.length>0）{
$.each（value3.children，function）（键4，value4）{
如果（值4.length>0）{
var ui_l3='
”+value4[0]。name+”
；
html_str=html_str+ui_l3；
}
})
}
html_str=html_str+''；
});
})
}
html_str=html_str+''；
});
$（'.contract_main'）.html（html_str）；
响应=真；
}否则
响应=错误；
});
返回响应；
}

HTML

<div class="dd">
  <ol class="dd-list simple_with_drop vertical contract_main">

  </ol>
</div>

我遇到了这样一种情况，我必须用一个HTML模式弹出窗口绑定子

的数据元素，这样如果模式中的值被更新，它也应该在对象/Dom中更改

有人建议我使用VueJs

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

---

任何关于我如何做到这一点的帮助都是非常好的

目前，我在您的代码中没有看到Vue.Js的任何结构，您正在处理JSON数据并在Js代码本身中构建HTML。您可以用vue的方式来实现，在vue中创建、加载，并使用vue语法来实现和。您可以在以下代码中看到一个简单的示例：

newvue({
el:“#应用程序”，
数据：{
jsonData:[]
},
挂载（）{
这是loadJsonData（）；
},
方法：{
loadJsonData（）{
设置超时（（）=>{
this.jsonData=[“第一”、“第二”、“第三”、“等等”]
}, 300)
}
}
})

{{data}

vuejs是一个完整的框架，您已经使用jquery进行了一些数据操作，为什么要在页面上添加另一个库来进行一些模式绑定？@madalinivascu这只是一个示例，实际上，该应用程序将使用大量Json和Ui端数据更新/删除等，几乎就像SPA一样，因此，我们决定使用一个框架，如果你能给我一些指导，我应该如何推进这项工作，那就足够了