[vue.js] view에 바인딩 된 '배열' 변수를 업데이트 할 때, 감지 안되는 문제

1.  기존 하려고 했던 기능

우선 컨트롤하고자 하는 변수는 아래와 같이 선언되어있다.

isError:boolean = false

 

view에 아래와 같이 notiMessage를 띄워주기 위해, v-if로 감지하고 있었다.

<p v-if="isError == true">{{ notiMessage }}</p>

script에서 이 isError 플래그를 변경시킬 때는 아래와 같이 변경했다.

// 에러일 경우
this.isError = true;
or
// 에러가 아닐 경우
this.isError = false;

 

위 코드는 잘 동작했다.

 

2.  문제의 시작

그런데 이 isError 변수를 2차원 배열 형식으로 변경하고 싶어 아래와 같이 변경하였다.

기능적인 이유로 인해 1차원 배열로 변경하였고, flag 변수와 notiMessage변수를 따로 가져가지 않기 위해 2차원 배열로 만들어줬다.

우선 컨트롤하고자 하는 변수는 아래와 같이 선언되어있다.

isError: [boolean, string][] = [];

 

<p v-if="isError[idx][0] == true">{{ isError[idx][1] }}</p>​

그리고 script 에서도 똑같이 아래와 같이 리팩토링했다.

// 에러일 경우
this.isError[idx][0] = true;
this.isError[idx][1] = '에러입니다!';
or
// 에러가 아닐 경우
this.isError[idx][0] = false;
this.isError[idx][1] = '';

리팩토링 이후 정상 동작하지 않았다.

isError 배열에 push, pop 동작이 될 때는 v-if로 감지가 잘 되어 정상동작했지만,

배열 안의 true,false 값이 변경되는것은 view에서 감지하지 못했다.

 

몇시간여의 삽질 결과, script에서 아래와 같이 작성해줘야 한다는 사실을 알게 되었다.

 

3.  문제의 해결

// 에러일 경우
Vue.set(this.isError[idx], 0, true);
Vue.set(this.isError[idx], 1, '에러입니다!');
or
// 에러가 아닐 경우
Vue.set(this.isError[idx], 0, false);
Vue.set(this.isError[idx], 1, '');

 

4. 결론

- vue3.0에선 저렇게 배열 내부의 값 변경도 감지하는 기능이 있다고 얼핏 봤었다.

- 공부를 더 해봐야겠다.

 

참고 : https://stackoverflow.com/questions/58587450/v-bind-isnt-detecting-the-change-in-array-content-vue-js

v-bind isn't detecting the change in array content (vue js)