Vuejs 계산된 속성 및 jquery ui 정렬 가능 문제

Vuejs 계산된 속성 및 jquery ui 정렬 가능 문제

내 프로젝트에서 나는 3개의 구성요소를 가지고 있다.ul목록. 또한 나는 어떤 종류의 데이터 배열과 항목이 있고, 각 항목에는 몇 가지 속성이 있다.제 목표는 다음과 같다.

1. 기본 배열의 항목을 세 개의 목록으로 배포
2. 각 항목에는 항목이 속한 목록을 알려주는 속성이 있으므로 목록 간에 항목을 드래그 앤 드롭하고 그에 따라 항목 데이터를 업데이트할 수 있도록 설정

많은 코드를 복사 붙여넣는 대신, 나는 다음과 같은 간단한 예를 사용하여 jsfiddle에서 잘못된 행동을 재현하려고 했다.

https://jsfiddle.net/89pL26d2/4/

중요한 건, 끌어서 놓을 때, 한 개 대신 정확히 두 개의 물건을 끌고 온다는 겁니다.

그러나 계산된 속성에서 다음으로 전환한 경우watch나는 원하는 행동을 했고 모든 것이 잘 풀렸다.

나는 어떤 라인이 오류를 발생시키는지 알아낸다: 드래그 완료 후 어떤 목록에 항목이 속해야 하는지 알려주는 항목 속성을 업데이트할 때 라인.하지만 왜 이런 일이 일어나는지 알 수가 없다.

HTML로 직접 작업하는 것이 가장 좋은 방법은 아니라는 것을 알지만, 지금은 괜찮다.

일반적으로 내가 Vue, 특히 목록과 관련된 이슈를 볼 때마다 잘못된 아이템이 업데이트되거나 그런 것들을 보면, 그것은 Vue가 똑똑해지려고 노력하지만 그것이 가장 좋은 정보를 가지고 있지 않기 때문에 틀리게 되는 것으로 귀결국 Vue로 귀결된다.이것은 거의 항상 a를 사용함으로써 해결된다.key.

반복된 DOM 콘텐츠가 단순하지 않거나 성능 향상을 위해 의도적으로 기본 동작에 의존하는 경우가 아니라면 가능하면 언제든지 v-for에 키를 제공하는 것이 좋다.

열쇠.

<div id="app">
  <div>
    <ul id="listA" data-list="A" class="connectedSortable">
      <li v-for="item in listAFiltered" :key="item.id" :data-id="item.id">{{ item.title }}</li>
    </ul>

    <ul id="listB" data-list="B" class="connectedSortable">
      <li v-for="item in listBFiltered" :key="item.id" :data-id="item.id">{{ item.title }}</li>
    </ul>
  </div>
</div>

키를 추가하면 문제가 해결된다.

참조URL: https://stackoverflow.com/questions/43069570/vuejs-computed-properties-and-jquery-ui-sortable-issue