[vue.js + vuetify.js] Treeview의 open-all이 동작 하지 않을 때 처리방법??

treeview를 구현 중인데, 상황에 따라 open-all 열리고 어떤 경우에는 열리지 않는 문제가 발생하였다.

API문서를 찾아보니 mounted 될때 open-all이 true인경우 모든 노드를 오픈한다는 것이다. 

라이프싸이클 주기 중에 마운트 주기에서 이미 오픈 노드를 시행하는 것이다.

그것도 모른 채 너무 많은 시간을 기술검토와 삽질로 보냈다.

api 문서를 보고 open-all이 동작하는 주기는 이제 알게되었으니, 더 이상 삽질은 하지말자.

지금 문제가 발생하는 상황은 다이얼로그에 구현한 treeview이다.

생명주기를 로그찍어보니 부모.vue로 가칭했을 때 부모뷰가 열릴때, 다이얼로그 뷰도 함께 로드되어 created() 와 mounted() 주기가 이미 호출됨을 확인하였다.

부모.vue에서 버튼을 눌렀을 때 호출되어야 하는데 이미 호출되어진 관계로 더 이상 create() 주기와 mounted()주기는 호출할 수 없다. 그럼으로 mounted()주기에서 활성화되는 open-all은 적용할 수 없다는 결론에 도달한다.

그렇다면 어떻게 하면 될가??

Functions

트리뷰 API 문서를 보니 updateAll()함수로 모든 노드를 열거나 닫을 수 있음을 알게되었다.

다음 예제는 버튼을 눌렀을 때 트리뷰를 열거나 닫는 예제코드이다.

트리뷰에 ref 변수를 적용하여 updateAll()함수를 호출하면된다.

:open-all=”expanded”함수는 없어도 동작한다.

[예제]

<v-treeview
  :items="branches"
  :open-all="expanded"
  ref="myTreeview"
/>

<v-btn @click="toggleTreeview">
  <v-icon>{{ expanded ? 'mdi-arrow-collapse-all' : 'mdi-arrow-expand-all'}}</v-icon>
</v-btn>

<script>
export default {
  data() {
    return {
      expanded: true,
      branches: [...],
    }
  },
  methods: {
    toggleTreeview() {
      this.expanded = !this.expanded;
      this.$refs.mytreeview.updateAll(this.expanded); 
    },
  }
}
</script>

그렇다면, 트리뷰는 이미 마운트 된 상태이고 

특정 값에 따라 트리뷰를 구성할 데이터를 서버로 부터 가져오게 하는 방법은 부모컴포넌트에서 아래와 같이 refs함수를 서서 트리뷰(MyTreeDialog)에 있는 searchTreeList()함수를 호출하면된다.

    <MyTreeDialog ref="refTree"
      :visible="flag.isVisible"
      @close="closeTreeDialog" />

this.$refs.refTree.searchTreeList(params);

그리고 부모뷰에서 $refs함수를 호출하여 모든 노드가 자동으로 열리도록 tooggleTreeview()를 호출해주면 된다.

하지만 예상은 빛나갔다.

동작하지 않는다.

무슨차이일까?

버튼을 사용자가 직접 클릭할 때와 라이프싸이클 주기가 다른가…..

삽질을 피하기 위해 다이얼로그 뷰의 생명주기 로그를 찍어보았다.

  mounted() {
    console.log('#mounted');
  },
  created() {
    console.log('#created');
  },
  beforeUpdate() {
    console.log('#beforeUpdate');
  },
  updated() {
    console.log('#updated');
  },

그리고 해결책을 찾았다. 데이터가 변경이 되면 beforeUpdate() 주기 호출 후 update()추기가 호출 되었다.

그럼으로 해결방법은 update()주기에서 모든 노드가 열리는 함수를 호출하는 것이다

  updated() {
    console.log('#updated');
	this.$refs.treeview.updateAll(true);
  },

지난주 금요일부터 풀리지 않던 문제가 해결되었다.

[REFERENCE]

• https://vuetifyjs.com/en/api/v-treeview/#props
• https://stackoverflow.com/questions/64229201/how-to-collapse-a-v-treeview-with-a-button-in-vuetify