How to render a List Element using VueJs from a json data

Vote count: 0

I have a javascript code which renders

, Using a json from the server . The code looks something like this

function loadWorkFlowRules() {
  var wf_id = 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 = '

' + value1.name + '

1. '; 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 = '
2. ' + value1.name + '
   1. '; html_str = html_str + ui_l2; if (value3.children.length > 0) { $.each(value3.children, function(key4, value4) { if (value4.length > 0) { var ui_l3 = '
   2. ' + value4[0].name + ' 
      '; html_str = html_str + ui_l3; } }) } html_str = html_str + '
   '; }); }) } html_str = html_str + '

';
      });
      $('.contract_main').html(html_str);
      response = true;

    } else
      response = false;

  });

  return response;
}

HTML

I got into a situation where Ill have to Bind the data element of the child

• with an HTML MODAL popup , So that if the value in Modal is updated it shoud change in the Object/Dom also .

  I was recommended to use VueJs.

  I have went through! the basics of the VueJs , But that didn't cover how I ccan bind complete list from a Json ,

  Any help in how I can do this would be great

asked 29 secs ago

Vikram

Let's block ads! (Why?)



How to render a List Element using VueJs from a json data