Vue 객체, 배열을 index 값으로 바꾸기

Vue에서는 객체나 배열 내부 정보를 바꿀 때 index로 바꾸게 되면 바뀌지 않는다.

 

data() {

return {

array: [["", "", ""], ["", "", ""], ["", "", ""]],

};

}

 

이렇게 존재할 때,

 

array[1][0]= "a";

 

이렇게 하면 data는 바뀌지만, 바뀐 내용이 화면에 나오지 않는다.

 

해결 방법은 2가지이다.

 

import Vue from "vue" 로 import한 뒤,

 

Vue.set(this.array[1], 0, "a");

 

이렇게 Vue의 set 매쏘드를 이용하면 된다.

 

 

 

혹은 import하지 않고

 

그냥 this.$set(this.array[1], 0, "a");

 

이렇게 해도 된다.

 

만약 3차원, 4차원 배열인 경우에는

 

set(array[3][1][2] , 0, "a") 

 

이렇게 마지막 인덱스만 2번째 인자로 받아주면 된다.