VueJ를 사용하여 요소를 동적으로 컴파일 및 마운트s

VueJ를 사용하여 요소를 동적으로 컴파일 및 마운트s

더 이슈

나는 VueJS용 jQuery DataTables에 경량 포장지를 만들었다.

<template>
    <table ref="table" class="display table table-striped" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th v-for="(column, index) in columns">
                    {{ column.name }}
                </th>
            </tr>
        </thead>
    </table>
</template>

<script>
    export default {
        props: ['columns', 'url'],
        mounted: function () {
            $(this.$refs.table).dataTable({
                ajax: this.url,
                columns: this.columns
            });
            // Add any elements created by DataTable
            this.$compile(this.$refs.table);
        }
    }
</script>

데이터 표를 이렇게 활용하고 있다.

<data-table
    :columns="
        [
            {
                name: 'County',
                data: 'location.county',
            },
            {
                name: 'Acres',
                data: 'details.lot_size',
            },
            {
                name: 'Price',
                data: 'details.price',
                className: 'text-xs-right',
            },
            {
                name: 'Actions',
                data: null,
                render: (row) => {
                    return &quot;\
                        <a @click='editProperty' class='btn btn-warning'><i class='fa fa-pencil'></i> Edit</a>\
                    &quot;;
                }
            },
        ]
    "
    url="/api/properties"
></data-table>

액션 컬럼의 "렌더" 방법을 참고하십시오.이 기능은 잘 작동하며 예상대로 버튼이 렌더링되지만@click핸들러가 작동하지 않음.

주위를 둘러보니 도움이 되지 않는 두 개의 링크가 있었다.

VueJS GitHub repo 254호(VueJS 1.0용 솔루션 제공)(사용)this.$compile) 그러나 이는 VueJS 2.0에서 제거되었다.

Will Vincent의 블로그 게시물은 로컬 데이터가 동적으로 변경될 때 DataTable을 다시 렌더링하는 방법에 대해 설명하지만 렌더링된 요소에 핸들러를 부착하는 방법은 제공하지 않는다.

최소 실행 가능 솔루션

렌더링된 요소를 컴파일하고 장착할 수 없다면, 렌더링된 요소의 메서드를 실행할 수만 있다면 괜찮다.DataTable클릭 시 구성 요소.아마도 다음과 같은 것이 있을 것이다.

render: (row) => {
    return "\
        <a onclick='Vue.$refs.MyComponent.methods.whatever();' />\
    &quot;;
}

Vue 컨텍스트 외부에서 메소드를 호출할 수 있는 방법이 있는가?

이것은 당신의 최소한의 실행 가능한 해결책에 부합한다.

열 정의에서:

render: function(data, type, row, meta) {
   return `<span class="edit-placeholder">Edit</span>`  
}

DataTable 구성 요소:

methods:{
  editProperty(data){
    console.log(data)
  }
},
mounted: function() {
  const table = $(this.$refs.table).dataTable({
    ajax: this.url,
    columns: this.columns
  });

  const self = this
  $('tbody', this.$refs.table).on( 'click', '.edit-placeholder', function(){
      const cell = table.api().cell( $(this).closest("td") );
      self.editProperty(cell.data())
  });
}

예(다른 API를 사용하지만 동일한 아이디어).

이것은 jQuery를 사용하고 있지만, 당신은 이미 jQuery를 사용하고 있기 때문에 그것이 그렇게 끔찍하게 느껴지지 않는다.

나는 컴포넌트를 장착하기 위해 게임을 좀 했다.render데이터 테이블의 기능을 어느 정도 성공적으로 수행하지만, DataTable API가 완벽하게 작동하도록 할 만큼 익숙하지는 않다.가장 큰 문제는 DataTable API가 렌더링 함수가 문자열을 반환할 것으로 예상한다는 것이었습니다.한정된API 또한 매우 짜증스럽게 현재 당신이 있는 셀에 대한 참조를 제공하지 않는데, 그것은 분명해 보인다.그렇지 않으면 이런 일을 할 수 있을 것이다.

render(columnData){
   const container = document.createElement("div")
   new EditComponent({data: {columnData}).$mount(container)
   return container
}

또한, 렌더 함수는 다중 모드와 함께 호출된다.컴포넌트를 셀에 렌더링할 수 있었지만 모드 등으로 게임을 많이 해야 했다.이것은 시도지만 몇 가지 문제가 있다.내가 뭘 하려고 했는지 너에게 알려주기 위해 연결하고 있어.아마 너는 더 많은 성공을 거둘 것이다.

마지막으로 DataTable에서 렌더링한 자리 표시자에 구성요소를 마운트할 수 있다.이 구성 요소를 고려하십시오.

const Edit = Vue.extend({
  template: `<a @click='editProperty' class='btn btn-warning'><i class='fa fa-pencil'></i> Edit</a>`,
  methods:{
    editProperty(){
      console.log(this.data.name)
      this.$emit("edit-property")
    }
  }
});

장착 방법에서 다음을 수행할 수 있다.

mounted: function() {
  const table = $(this.$refs.table).dataTable({
    ajax: this.url,
    columns: this.columns
  });

  table.on("draw.dt", function(){
    $(".edit-placeholder").each(function(i, el){
        const data = table.api().cell( $(this).closest("td") ).data();
        new Edit({data:{data}}).$mount(el)
    })
  })

}

이렇게 하면 각 자리 표시자 위에 Vue가 렌더링되고, 그릴 때 다시 렌더링된다.여기에 그 예가 있다.

참조URL: https://stackoverflow.com/questions/43635913/dynamically-compiling-and-mounting-elements-with-vuejs