[ Vue.js ] 오류 : v-if, v-show에서 변경 값 인식 안됨

 

구현 계획 

파일 목록 리스트에 마우스를 올리면 삭제버튼이 생기고 마우스를 내리면 삭제버튼이 없어지는 것

밑의 mp4는 원하는 기능을 구현한 영상입니다.

bandicam 2021-02-15 23-13-31-235.mp4

0.30MB

 

문제 사항

mouseAction 함수는 item 값에 true/false 값으로 변경하는 기능을 합니다. 

mouseover을 인식해 값을 변경하지만, 버튼은 보여지지 않았습니다. 목록 리스트를 클릭할 경우, true값을 인식하지만 즉각적인 반영은 되지 않았습니다.

	<div  @mouseover="mouseAction(item,true);" @mouseleave="mouseAction(item,false);">    
      	<span @click="openFile(item)">{{ item.name }}</span>
        <span id="toc" v-if="deleteBtn[item.name]">
          <v-btn
          class="align-self-center rounded-sm"
          icon
          x-small
         @click="deleteChapter(item)">
            <v-icon>mdi-trash-can-outline</v-icon>
          </v-btn>
        </span>
 	</div>

1. console.log 로 변경된 시점의 deleteBtn의 값을 정확히 변경된다는 것을 확인했습니다.

2. console.log 값과 개발자 도구 vue 창을 동시에 켜서 값 변화를 비교했습니다.

중요과정. console.log로 확인하기 보다는 저장된 데이터를 확인해서 비교해야된다. 

=> vue 창의 값은 변경되지 않았습니다. 

문제점은 찾을 수 있었지만, 해결책을 알 수 없었습니다. 검색을 하면서 유사경우를 찾고 해결하고자 노력했지만, 이렇다할 해결책을 찾을 수 없었습니다. 어떤 검색어로 검색해야될지 감도 오지 않았습니다.

최후의 수단으로 vue.js 공식문서를 정독했습니다. 

덕분에 해결 방법을 찾을 수 있었습니다. 

아래는 참고했던 공식문서입니다.

kr.vuejs.org/v2/guide/reactivity.html

반응형에 대해 깊이 알아보기 — Vue.js

 

해결 과정

vue에서는 변경 감지를 하기 위해서는 속성의 추가 제거를 감지할 수 없습니다. vue는 인스턴스 초기화 중에 getter/setter 변환 프로세스를 수행하기 때문에 data 객체에 속성이 있어야 vue 가 이를 변환하고 응답할 수 있습니다.
vue는 이미 만들어진 인스턴스에 새로운 루트 수준의 반응 속성을 동적으로 추가하는 것을 허용하지 않습니다. 그러나 vue.set(object, key, value) 메소드를 사용하여 중첩된 객체에 반응성 속성을 추가할 수 있습니다.

1. vue.set 함수를 이용해서 Object 객체에 vue.set함수로 값을 입력하였습니다. 

하지만, 원하는대로 작동되지 않았습니다. 

vue는 DOM 업데이트를 비동기로 합니다. 데이터 변경이 발견 될 때마다 큐를 열고 같은 이벤트 루프에서 발생하는 모든 데이터 변경을 버퍼에 담습니다. vue.js는 일반저긍로 개발자가 '데이터 중심'방식으로 생각하고 DOM을 직접 만지지 않도록 권장하지만 때로는 건드려야 할 수도 있습니다. vue.js 가 데이터 변경 후 DOM 업데이트를 마칠 때까지 기다리려면 데이터가 변경된 직후에 vue.nextTick(콜백)을 사용할 수 있습니다. 

2. 비동기 갱신을 해결하기 위해 vue.nextTick을 값을 변경한 직후에 추가하였습니다. 

 

원하던 기능을 구현할 수 있었습니다. 

진짜 다시 한번 공식문서의 중요성을 인지할 수 있었습니다.