json 데이터에서 VueJs를 사용하여 목록 요소를 렌더링하는 방법

json 데이터에서 VueJs를 사용하여 목록 요소를 렌더링하는 방법

나는 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 팝업에서 Modal 값이 갱신되면 Object/Dom에서도 값이 변경됩니다.

VueJs 사용을 추천받았습니다.

VueJs의 기본은 확인했습니다만, Json의 완전한 리스트를 어떻게 바인드 할 수 있는지에 대해서는 설명하지 않았습니다.

어떻게 하면 좋을까요?

현재 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를 통해 코드 구조화 방법, 원격 API에서 데이터를 JSON 형식으로 가져와 표시하는 방법을 자세히 이해할 수 있습니다.

언급URL : https://stackoverflow.com/questions/42197416/how-to-render-a-list-element-using-vuejs-from-a-json-data