어떠하호
261
2019-03-03 11:36:19
3
233

vue.js table에서 jquery의 sortable을 이용시 질문이 있습니다.


안녕하세요!!날씨가 이제는 봄날씨네요!

질문이 있어서 오랜만에 글남기게 되었습니다. ^^


Vue.js사용시 sortable 사용하여 테이블을 재배열 하고

Num 해당하는 숫자를 실시간으로 재배열 하고 싶습니다.

html에서는 아래와 같이 코딩이 되어 있구요.

 

 

<table class="sortable" id="mapTableList">

                                <thead>

                                    <tr>

                                        <th>{{ resources.curriculum_Numbering }}</th>

                                        <th>{{ resources.curriculum_list_title }}</th>

                                        <th>{{ resources.curriculum_learningelementName }}</th>

                                        <th></th>

                                        <th></th>

                                        <th>{{ resources.curriculum_delete }}</th>

                                    </tr>

                                </thead>

                                <tbody>

                                    <tr v-for="(elements, index) in mapinfo.list_items.elements_list" key="index">

                                        <td :value="elements.num" v-model="elements.num">

                                            <!--{{elements.num}}-->

                                        </td>

                                        <td>

                                            {{elements.element_id}}

                                        </td>

                                        <td>

                                            {{elements.element_type}}

                                        </td>

                                        <td>

                                            <a href="#" class="modal-datepicker-page" v-on:click="fn_GetSelectedDate(index)">

                                                <i aria-hidden="true" class="fa fa-calendar fa-2x" style="cursor:pointer"></i>

                                            </a>

                                        </td>

                                        <td>

                                            {{resources.curriculum_course}} &nbsp;&nbsp;&nbsp; {{elements.learning_start_date}} ~ {{elements.learning_deadline_date}} <br />

                                            {{resources.curriculum_reading}} &nbsp;&nbsp;&nbsp;   {{elements.learning_deadline_date}}{{elements.learning_deadline_date}}

                                        </td>

                                        <td>

                                            <a href="#" class="modal-delete-confirm" v-bind:data-mv-delete-page-title="elements.element_id" v-on:click="fn_SaveDeletePage(index)"><img src="images/icn_delete01.png" alt="delete" style="cursor:pointer"></a>

                                        </td>

 

                                    </tr>

                                </tbody>

                            </table>

 

 

Js 단에서는 아래와 같이 받습니다.

 

$(".sortable tbody").sortable({

 

부분에서 stop부분에서 아래 함수를 적용해서

 

1

3

2

4

5

되어 있는 것들을 num컬럼만

1

2

3

4

5

변경하려고 아래와 같이 사용했는데 안되네요..뭐가 문제일까요?ㅠㅠ

for (var i = 0; i < mapEditor.mapinfo.list_items.elements_list.length; i++) {

 

                mapEditor.mapinfo.list_items.elements_list[i].num = i + 1;

 

                console.log(mapEditor.mapinfo.list_items.elements_list[i].num);

            }


아래와 같은 예제그림입니다.


0
0
  • 답변 3

  • Kunie
    533
    2019-03-03 14:16:28

    Vue 는 가상 DOM 을 조작하는데, Jquery 는 그렇지 않습니다.

    Jquery 의 함수들, 예를들면 .sortable() 이 호출되는 시점에 작성된 실제 DOM 을 찾게 됩니다.

    애초에 DOM을 조작하는 방법 자체가 다르기 때문에 JQuery 와 Vue 를 같이 사용할 이유는 어지간해서는 없습니다.

    Vue 에서도 Drag 이벤트 관련한 라이브러리가 많이 있으니 그걸 찾아보시는게 좋겠습니다.
    0
  • okkydokkyy
    2019-03-03 17:43:52

    알수없는 버그가 발생할 수 있어서 Vue.js랑 jQuery랑 같이 쓰면 안돼요. 다른 방법을 생각해보셔야 할 것 같네요


    0
  • 어떠하호
    261
    2019-03-04 08:40:33

    하,,,해외 본사에서 이렇게 썼길래 될줄알았건만 안되는군요 ㅋㅋㅋㅋㅋㅋ

    sortable.js를 쓰면 한방에 해결은 되네요 요걸로 

    검토해봐야겠습니다


    답변감사합니다 좋은하루보내세요~!

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.