[Vue] Vue.set : 배열 데이터 인덱스를 사용해서 변경시 데이터 적용 문제 해결

data() {
            return {
                tableData: [
                    ['', '', ''],
                    ['', '', ''],
                    ['', '', ''],
                ],
                turn: 'O',
            };

this.turn  = 'X';이렇게 하면 turn에 관한 데이터는 알아서 잘변경 되지만

tableData[0][1] = 'O'; 와 같이 인덱스로 데이터에 접근해서 변경하는 경우는 데이터 변경부분이 적용되지않는다.

배열에 있는 매소드를 사용해 데이터를 바꾸는건 또 적용된다. ex) tableData.push(['', '', '']);

 

인덱스를 사용해서 배열을 변경하고 화면에도 적용하려면

 

import Vue from 'vue';

Vue.set(this.tableData[1], 0, 'X'); //tableData[1][0] = 'X';

or
//Vue임포트하기 귀찮으면
this.$set(this.$root.$data.tableData[this.rowIndex], this.cellIndex,this.$root.$data.turn);

이렇게 Vue.set을 사용하여 변경해주면 적용된다.

 

#나중에 컴포넌트가 많아지다보면 this.$root나 this.$parent.$parent.$parent이런식으로 너무복잡해져서 답이없다 이럴때쓰는게 vuex(대충 데이터 중앙통제실)을 써서 모든데이터를  한곳에서 관리하는 라이브러리를 사용한다고 한다.