웹(web)/프론트엔드-vue25 반응성 유지하면서 데이터 주입 배열객체와 일반 객체에 데이터를 주입하면서 반응성도 만들어 내는 방법은 없을까? 답은 set을 사용하면 된다. 전역객체 Vue.set도 가능하고 vm인 this를 사용해도 된다. 인자는 주입될 객체, 배열인 경우 인덱스/객체인 경우 키, 추가할 값 순서이다. this.todos[3] =new data 이 아니라 this.$set(todos, 3, new data) 를 사용해야 반응성이 생긴다. 2020. 7. 9. v-for using object v-for에서 반복할 대상이 객체인 경우에는 키별로 반복이 된다. 배열을 쓸 때와 약간 다르므로 문법을 비교해보자. 배열 같은 경우는 push나 pop같은 것을 쓰면 데이터 변경시 반응성을 가진다. 하지만 객체 obj는 생성될 때 name 과 age 속성만 있었으므로 다른 속성을 동적으로 추가해도 반응성을 가지지 못한다. 이에 대한 해결 방법은 vm.obj 의 참조 값에 새로운 객체를 다시 할당시키는 방법이다. gender: male 속성을 추가해보자. vm.obj = Object.assign({}, vm.obj, { gender: male} ) 위 코드를 통해 obj는 새로운 객체를 참조하게 되고 이 새로운 객체는 만들어 질 때 기존 obj 속성들과 gender 속성을 가지므로 모두 반응성을 가진다. .. 2020. 7. 9. v-show vs v-if Vue에서 정의된 show data에 따라서 박스를 토글시키는 예제이다. v-show와 v-if의 값으로 오는 것이 true일 경우에는 동일하게 html 태그가 존재한다. false일 경우에는 화면에는 둘다 보이지 않게 될 것이다. 하지만 false일 때 html 코드가 다르다. 아래 코드를 보면 하나는 아예 코드가 표시되지 않는다. 바로 v-if가 화면에서도 사라지면서 코드 상에서도 사라진다. 따라서 토글이 자주 사용된다면 v-if보다는 v-show가 나은 선택이다. 반대로 초기 렌더링에는 필요 없다가 특정 조건 이후에 계속 살아있게 하려면 v-show가 좋을 것이다. 2020. 7. 9. v-if v-if의 값으로 오는 수식이 true일 경우 해당 엘리멘트가 사용된다. 그렇지 않은 엘리멘트는 렌더링 되지 않는다. 2020. 7. 8. 이전 1 2 3 4 5 6 7 다음
