다시 표현된 제목은 v-if based on DOM 업데이트입니다.

Question

v-for를 사용하여 일부 요소를 렌더링했습니다. 각 요소에는 텍스트와 버튼이 포함되어 있습니다. 텍스트가 div 높이를 초과할 때만 버튼을 표시해야 합니다

으아악

가장 확실한 해결책은 v-if를 이용하는 것인데, 이를 어떤 기준으로 근거로 삼아야 할까요? 텍스트의 높이를 계산하고 버튼을 표시할지 여부를 결정해야 합니다. 따라서 refs를 사용하여 div를 참조하고 표시 여부를 결정하는 함수를 사용해야 합니다.

으아악

하지만 문제는 itemsDOM과 동기화되지 않는다는 것을 알았습니다. 따라서 DOM은 비동기식으로 업데이트되므로 내 데이터가 약간 늦습니다. 그래서 showButton 함수에 nextTick()를 추가하기로 결정했는데 Promise가 반환되기 시작하여 v-if가 항상 true가 되었습니다

으아악

그렇다면 각 요소별로 버튼을 표시하거나 숨길 수 있는 방법이 있나요?

Answer 1

Vue에서 watchers를 사용하여 이 작업을 완료했는데 도움이 되기를 바랍니다!

으아악

스크립트 부분과 입력 부분을 업데이트했습니다.

으아악