Как визуализировать элемент списка с помощью VueJs из данных json

Question

У меня есть код javascript который отображает <ol><li></li></ol>, используя 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> 

я попал в ситуацию, когда больные должны Свяжите элемент данных ребенка <li> с всплывающим окном HTML МОДАЛЬНОГО, так что если значение в Modal обновляется и изменяется в Object/Dom.

Мне рекомендовали использовать VueJs.

Я прошел! основы в VueJs, но не охватывали как я ccan связать полный список из Json,

Любая помощь в том, как я могу сделать это было бы здорово

Answer 1

В настоящее время я не вижу никакой структуры Vue.Js в вашем коде, и вы управляете данными JSON и создаете HTML в самом коде JS. Вы можете сделать это с помощью 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, чтобы понять больше о структуризации кода, как извлекать данные из удаленных интерфейсов API в формате JSON и отобразить его.